Developer
CSS BOX SHADOW
Create and preview CSS box shadows with offset X/Y, blur, spread, color, opacity, and inset controls.
Private by design
No signup · Free
Offset X0
Offset Y0
Blur0
Spread0
Opacity100
No saved shadows yet.
Toggles between Normal and Hover shadow states to simulate a hover transition.
Frequently Asked Questions
¿Cómo la creo?
Mueve controles: la previa y el código van en vivo.
¿Qué es inset?
Sombra hacia dentro, para hundidos.
¿Varias capas?
Sí. Suma sombras.
¿Es gratis?
Sí.
How to Use
01
Pon valores
X, Y, blur, spread.
02
Elige color
Color y opacidad.
03
Copia el código
CSS o Tailwind.
How to Calculate
Los valores forman el string box-shadow.
Sobre esta herramienta
Herramienta que da profundidad a botones y tarjetas. Con capas, inset y exportado Tailwind. Sombras pro sin memorizar CSS. Gratuita.
Related Tools
Methodology & feedback
Figures run locally in your browser from the values you enter (page updated ). Estimates are educational only — verify finance, tax and health decisions with a qualified professional (see Disclaimer). Spotted an error? Report it via contact and we correct with a new update date.
Was this tool helpful?
Thanks — feedback recorded anonymously.