ZenovayTools

Generador CSS de Sombras de Caja

Diseña efectos CSS box-shadow visualmente con múltiples capas, soporte de sombras internas, control de opacidad y salida CSS lista para copiar.

Live preview

Preview background

Box color

Presets

Shadow Layers

px
px
px
px
%

CSS Output

box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.15);

Cómo usar Generador CSS de Sombras de Caja

  1. 1Ajusta el desplazamiento de sombra, desenfoque, expansión y color con deslizadores.
  2. 2Agrega múltiples capas de sombra para efectos complejos.
  3. 3Prueba presets como neumórficos, tarjeta flotante o brillo.
  4. 4Copia el código CSS generado para tu proyecto.
ZenovayAnalytics

Descubre qué hacen de verdad tus visitantes.

  • Seguimiento de visitantes en tiempo real
  • Privacidad primero, sin aviso de cookies
  • Configurado en dos minutos
Descubre Zenovay

Herramientas relacionadas

Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.
Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.
Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.
Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.

Preguntas frecuentes

¿Cuál es la sintaxis CSS box-shadow?▾
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Ejemplo: box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.2).
¿Cuál es la diferencia entre box-shadow y drop-shadow?▾
box-shadow crea una sombra rectangular detrás del modelo de caja. filter: drop-shadow() sigue la forma visible del elemento incluidas áreas transparentes.
¿Cómo creo una sombra realista?▾
Usa baja opacidad (10-30%), desplazamiento ligeramente hacia abajo, desenfoque moderado, expansión cero o negativa. Agrega una segunda capa de sombra ambiental para realismo.
¿Para qué se usan las sombras internas?▾
Las sombras internas aparecen dentro del elemento, creando efectos presionados/hundidos. Se usan para botones presionados, campos de entrada, diseño neumórfico y barras de progreso.
¿Cómo funcionan múltiples sombras de caja?▾
Los múltiples valores están separados por comas y se renderizan en orden (primero arriba). Esto permite profundidad en capas, combinaciones de brillo + sombra paralela y efectos neumórficos.