Generador de box-shadow CSS
Diseña sombras CSS perfectas con sliders visuales. Añade múltiples capas de sombra, controla offset, blur, spread y color. Previsualización en tiempo real.
Sintaxis de box-shadow
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;- offset-x: desplazamiento horizontal. Positivo = derecha, negativo = izquierda.
- offset-y: desplazamiento vertical. Positivo = abajo, negativo = arriba.
- blur-radius: radio de desenfoque. 0 = sombra nítida. No acepta negativos.
- spread-radius: expansión de la sombra. Positivo = más grande, negativo = más pequeña.
- inset: convierte la sombra exterior en interior (ej: inputs con foco).
Múltiples sombras (stack de sombras)
box-shadow:
0 1px 3px rgba(0,0,0,.12),
0 4px 6px rgba(0,0,0,.08),
0 12px 24px rgba(0,0,0,.06);Combinar varias capas de sombra crea efectos de elevación más naturales (técnica usada en Material Design).
Preguntas frecuentes
¿Cuál es la diferencia entre box-shadow y filter: drop-shadow?
box-shadow sigue la caja del elemento (border-box). filter: drop-shadow sigue la silueta real del contenido, incluyendo imágenes PNG transparentes y elementos clip-path. Para imágenes con transparencia, usa drop-shadow.
Herramientas relacionadas
Generador de gradiente CSS
Crea gradientes CSS lineales, radiales y cónicos con selector visual. Previsualización en tiempo rea…
Usar herramienta →Generador de border-radius CSS
Crea border-radius CSS personalizados con previsualización visual. Controla cada esquina individualm…
Usar herramienta →Generador de variables CSS (Custom Properties)
Genera un sistema de design tokens CSS con variables de colores, tipografía, espaciado, sombras y bo…
Usar herramienta →