Generatore di ombre.

Genera box-shadow CSS con anteprima in tempo reale. Aggiungi più livelli per profondità e realismo, poi copia il CSS.


          
        

Regola i cursori per offset orizzontale/verticale, sfocatura, spread, colore e opacità di un box-shadow CSS. Seleziona Inset per un’ombra interna. L’anteprima si aggiorna dal vivo e il CSS generato è pronto da copiare nel foglio di stile.

Come si usa

Usa i cursori per ogni parametro. Seleziona Inset per ombra interna. Clicca il campione colore per cambiarlo. Il CSS si aggiorna dal vivo nel blocco scuro — clicca Copia per copiarlo.

Esempi

Soft lift box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.20)
Hard drop box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.80)
Inset press box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.25)

FAQ

What does Spread do?

Spread expands (positive value) or contracts (negative value) the shadow before blur is applied. A positive spread makes the shadow larger than the element; negative makes it smaller.

Can I combine multiple shadows?

CSS supports multiple box-shadows as a comma-separated list. Generate each shadow here separately and combine them manually in your CSS: box-shadow: shadow1, shadow2;

Strumenti correlati

Privacy e trattamento dei dati

Questo strumento gira interamente nel tuo browser. Nulla di ciò che digiti o incolli viene inviato a un server — tutta l'elaborazione avviene localmente sul tuo dispositivo.