Generatore CSS box-shadow
Genera CSS box-shadow con anteprima live. Regola offset, sfocatura, espansione, colore e opacità, poi copia il codice.
Anteprima
Parametri
Offset X (px)
Offset Y (px)
Sfocatura (px)
Espansione (px)
Colore
Opacità
CSS generato
Informazioni su questo strumento
Generatore gratuito online di CSS box-shadow per sviluppatori front-end. La proprietà CSS box-shadow aggiunge una o più ombre a un elemento. Ogni ombra è definita da offset orizzontale (offset-x), verticale (offset-y), raggio di sfocatura, espansione e colore. La parola chiave opzionale "inset" disegna l'ombra all'interno. Qui puoi regolare tutti i parametri con slider e selettore colore, vedere l'anteprima in tempo reale e copiare il CSS generato (es. box-shadow: 0 8px 24px 0 rgba(0,0,0,0.15);) nel foglio di stile. Nessuna installazione; tutto nel browser.
Come usare
1. Regola i parametri: usa gli slider o i campi numerici per Offset X (orizzontale), Offset Y (verticale), Sfocatura ed Espansione. Scegli il colore dell'ombra con il selettore colore o un valore HEX (es. #000000) e l'opacità (0–1). Spunta "Inset" per un'ombra interna.
2. Anteprima: la casella di esempio sopra si aggiorna in tempo reale. Controlla l'effetto prima di copiare.
3. Copia codice: quando sei soddisfatto, clicca "Copia codice" per copiare il CSS box-shadow negli appunti e incollalo nel file CSS o negli stili inline.