Generatore di ombre della scatola

Progetta ombre a strati con offset, sfocatura, diffusione e colore. Visualizza l'anteprima su una scheda, quindi copia il CSS con un clic.

Box Shadow Generator

Live
Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

  • Progetta ombre a più livelli con offset, sfocatura, diffusione e colore: anteprima dal vivo inclusa.
  • Funziona nel tuo browser
  • Gratuito da usare

Come usare

  1. Regola offset, sfocatura e diffusione.
  2. Scegli colore e opacità (o aggiungi livelli).
  3. Copia il CSS box-shadow.

How this tool works

  1. Regola offset, sfocatura e diffusione.
  2. Scegli colore e opacità (o aggiungi livelli).
  3. Copia il CSS box-shadow.

Recommended settings

  • Utilizza prima le opzioni predefinite, quindi modificale se necessario

Supported formats

Text / on-page input

File size and limits

  • Le anteprime multilivello molto complesse potrebbero risultare più lente sui telefoni più vecchi.

Privacy

I generatori di colori e CSS vengono eseguiti interamente nel tuo browser. Le anteprime e le conversioni non caricano mai i tuoi stili.

Common use cases

  • Usa Box Shadow Generator ogni volta che ne hai bisogno: progetta box-ombre stratificate con offset, sfocatura, diffusione e colore: anteprima dal vivo inclusa.

Troubleshooting

L'anteprima appare diversa dopo l'incollaggio

Verifica la presenza di CSS concorrenti sulla tua pagina (ripristini, colori ereditati). Copia prima la regola generata in un foglio di stile isolato.

FAQ

Questo carica il mio CSS?

No. Generatori e convertitori vengono eseguiti nel tuo browser con anteprima dal vivo.

Ho bisogno di un account?

No. Apri lo strumento, modifica i controlli e copia il CSS.

Strumenti correlati