Come generare un'ombra CSS per riquadri
Usa questa pagina per una sola ombra esterna o interna. Produce il valore standard box-shadow nello stesso ordine interpretato dal browser.
- Inserisci gli spostamenti orizzontale e verticale.
- Imposta un raggio di sfocatura non negativo e una distanza di espansione positiva, zero o negativa.
- Inserisci colore HEX e opacità dell'ombra.
- Scegli Esterna o Interna.
- Genera, controlla il riquadro di prova e copia la dichiarazione CSS.
Come funzionano le quattro lunghezze
La prima lunghezza è lo spostamento orizzontale, la seconda quello verticale. Valori positivi spostano a destra e in basso; negativi a sinistra e in alto. La terza è il raggio di sfocatura e non può essere negativa. Zero dà un bordo netto; un valore maggiore produce una transizione morbida più ampia. La quarta è l'espansione: valori positivi allargano la forma dell'ombra e negativi la contraggono.
Ombre esterne e interne
Un'ombra esterna viene disegnata dietro il riquadro del bordo e non cambia l'impaginazione. Può sovrapporsi ai contenuti vicini, quindi l'anteprima riserva spazio per l'intervallo massimo assegnato. Aggiungere inset trasforma l'effetto in un'ombra interna ritagliata nel riquadro. Gli stessi spostamenti modificano allora l'aspetto dell'ombra all'interno del campione.
Colore, opacità e CSS copiato
Il colore è un HEX opaco più un'opacità separata da 0 a 1. Opacità 1 viene emessa come HEX normalizzato di sei cifre; valori inferiori diventano rgba(red, green, blue, alpha). Il risultato mostra il valore esatto applicato al riquadro di prova. Modificare o svuotare un campo rimuove l'anteprima precedente e disattiva Copia finché i nuovi valori non sono convalidati.
Ambito e interpretazione corretta
- Un solo livello di ombra; nessuna sequenza separata da virgole.
- Sfocatura da 0–200px, spostamenti ed espansione da −200–200px.
- Nessun designer completo di componenti, editor di sfondi, animazione, esportazione immagine o garanzia di qualità del progetto.
- Le ombre grandi possono sovrapporsi perché box-shadow non influisce sull'impaginazione; controlla il componente finale con spaziatura e ritaglio reali.
Esempi
12px 12px 24px 0px rgba(0, 0, 0, 0.3) crea un'ombra esterna morbida verso destra e in basso.
inset 0px 4px 8px -2px rgba(17, 34, 51, 0.5) colloca un'ombra interna contratta.
Domande frequenti
La sfocatura può essere negativa?
No. CSS definisce il raggio di sfocatura come non negativo, quindi questo generatore rifiuta valori negativi.
L'espansione può essere negativa?
Sì. Un'espansione negativa contrae la forma dell'ombra e viene mantenuta.
Perché un'ombra grande non sposta i contenuti vicini?
Le ombre dei riquadri sono effetti visivi e non partecipano all'impaginazione.
Posso creare più livelli?
Non in questa pagina mirata. Genera volutamente una sola ombra.