Generatore Box Shadow CSS

Crea ombre box-shadow con anteprima live: sfocatura, diffusione, interna.

Offset X: 0px

Offset Y: 4px

Sfocatura: 12px

Diffusione: 0px

Opacità: 10%

Interno

Anteprima

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);

Cerchi gradienti o glassmorphism? Prova i nostri strumenti dedicati: Generatore Gradienti CSS · Creatore Glassmorphism

Come funziona

Scegli un effetto: box-shadow, gradiente o glassmorphism.
Regola i controlli e osserva l'anteprima in tempo reale aggiornarsi.
Rifinisci colori, sfocatura, diffusione e opacità.
Copia il CSS generato.

A cosa serve

Mettere a punto un box-shadow senza tirare a indovinare i valori.
Costruire un gradiente visivamente e copiarne il CSS.
Creare un effetto card in glassmorphism.

Da sapere

Produce CSS standard; alcuni effetti (come la sfocatura backdrop-filter) dipendono dal supporto del browser per l'aspetto finale.
L'anteprima mostra un singolo elemento: testalo nel tuo layout reale per le sovrapposizioni e le interazioni con lo sfondo.

Domande frequenti

Quali effetti posso generare?

Box-shadow, gradienti lineari/radiali e glassmorphism, ognuno con un'anteprima in tempo reale così regoli a vista, non per tentativi ed errori.

Il glassmorphism funzionerà ovunque?

Si basa su backdrop-filter, supportato dalla maggior parte dei browser moderni; quelli più vecchi ripiegano su uno sfondo semplice. Testalo nei tuoi browser di destinazione.

Viene caricato qualcosa?

No. Il CSS viene generato in tempo reale nel tuo browser.

Strumenti correlati