¿Algo va mal con esta herramienta?
Sobre «CSS Box Shadow Generator Online»
Esta herramienta construye valores CSS box-shadow visualmente con sliders para offset, desenfoque, dispersión, color y opacidad. Ves la sombra actualizarse en tiempo real y copias el CSS resultante cuando te satisface.
Las sombras de caja añaden profundidad, separan elementos del fondo y señalan interactividad (hover, presionado, foco). Las sombras multicapa pueden simular configuraciones de iluminación complejas como la elevación Material Design o efectos neumórficos.
Útil para tarjetas, modales, popovers, botones y cualquier elemento de UI que necesite elevación visual. Salidas en box-shadow clásico, múltiples capas y combinaciones modernas de offset/desenfoque.
Cómo usar esta herramienta
Cómo armar una declaración CSS box-shadow
Desplazamientos
«X offset (px)» y «Y offset (px)» mueven la sombra horizontal (positivo = derecha) y vertical (positivo = abajo). El default CSS es sin offset; las sombras de card típicas usan un Y ~ `4` y X cerca de 0.
Desenfoque y color
«Blur (px)» controla suavidad — 0 = bordes nítidos, 10+ = brumoso. «Color» admite cualquier color CSS, incluido rgba/hex con alfa. Para sombras UI sutiles, `rgba(0,0,0,0.15)` con blur moderado.
Ejecutar
Resultado: un único campo `css` — `<x>px <y>px <blur>px <color>`. Pega como valor de `box-shadow:`. No se emite spread ni inset; la sintaxis los permite pero la herramienta se ciñe a 4 argumentos.
Apilar varias sombras
Los diseños reales suelen apilar 2-3 sombras separadas por comas (una larga suave + una corta apretada) para dar profundidad. Genera cada una con la herramienta y concaténalas a mano en un único `box-shadow:`.