Generatore di ombre CSS: anteprima live, copia codice
Regola spostamento, sfocatura, espansione, colore e opacità per creare un valore CSS box-shadow, vedi l'anteprima live e copia il codice.
Generatore di ombre CSS
Questo generatore crea un unico valore CSS box-shadow a partire da sei controlli: spostamento orizzontale, spostamento verticale, raggio di sfocatura, raggio di espansione, un colore dell'ombra con il proprio cursore di opacità e un interruttore inset. Due ulteriori selettori di colore impostano il riquadro di anteprima e il suo sfondo, così l'ombra resta leggibile su superfici chiare o scure, e quattro preimpostazioni, soft, hard, glow e inset, caricano una combinazione pronta con un clic. Ogni modifica aggiorna subito la riga box-shadow sotto l'anteprima, pronta per essere copiata.
Come si costruisce il valore box-shadow
CSS scrive un'ombra in un ordine fisso: spostamento orizzontale, spostamento verticale, raggio di sfocatura, raggio di espansione, poi un colore; per disegnare l'ombra all'interno del bordo del riquadro anziché dietro, si antepone la parola inset. Lo spostamento orizzontale e verticale muove l'ombra lateralmente o in verticale, ed entrambi accettano valori negativi fino a -50px, così l'ombra può cadere a sinistra del riquadro o stare sopra di esso. Il raggio di sfocatura, da 0 a 100px, ammorbidisce il bordo dell'ombra, e il raggio di espansione, da -50 a 50px, ingrandisce o riduce l'ombra indipendentemente dalla dimensione del riquadro stesso. Il valore esadecimale del selettore di colore si scompone nelle sue componenti rosso, verde e blu, e il cursore di opacità, da 0 a 1, diventa il quarto valore dentro rgba(); a 0 l'ombra è del tutto trasparente, a 1 corrisponde esattamente al colore scelto.
Esempio svolto
Con uno spostamento orizzontale di 8px, uno verticale di 0px, una sfocatura di 20px e un'espansione di -5px, insieme al colore dell'ombra #15803d e un'opacità di 0,25, il risultato è box-shadow: 8px 0px 20px -5px rgba(21, 128, 61, 0.25). Il codice esadecimale #15803d si scompone in rosso 21, verde 128 e blu 61, e lo 0,25 del cursore di opacità diventa direttamente il quarto valore di rgba(), senza ulteriori conversioni. Attivare inset con gli stessi sei valori disegna l'ombra identica all'interno del bordo del riquadro anziché dietro, un effetto comune per i pulsanti premuti o i campi di input incassati.
Codice CSS pronto da copiare
.scheda {
box-shadow: 8px 0px 20px -5px rgba(21, 128, 61, 0.25);
}