Stax

Generador de Sombra de Caja CSS

Genera sombras de caja CSS visualmente con vista previa en vivo.

Horizontal (X)4px
Vertical (Y)4px
Blur radius10px
Spread radius0px
Opacity25%
Color
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

¿Qué es el generador de Box Shadow CSS?

Esta herramienta visual crea la propiedad box-shadow CSS. Ajusta offset X/Y, blur, spread, color e inset — todo con vista previa en vivo. Soporta sombras en capas estilo Material Design.

Cómo usar la herramienta

  1. Desliza offset Horizontal y Vertical.
  2. Ajusta radio de blur (suave vs nítido).
  3. Selecciona radio de spread (tamaño de sombra).
  4. Selecciona color y opacidad.
  5. Activa/desactiva inset (sombra interior).
  6. Copia el CSS.

Patrones de sombra comunes

  • Tarjeta sutil: 0 1px 3px rgba(0,0,0,0.1)
  • Material Design: múltiples sombras en capas
  • Botón presionado: inset 0 2px 4px rgba(0,0,0,0.2)
  • Efecto de brillo: 0 0 20px rgba(color, 0.5)

Preguntas frecuentes

¿Cómo funciona box-shadow CSS?
Sintaxis: box-shadow: x-offset y-offset blur spread color. Ejemplo: box-shadow: 0 4px 6px rgba(0,0,0,0.1) — sombra sutil bajo el elemento. Múltiples sombras separadas por coma. Palabra clave inset para sombra interior.
¿Cómo crear sombra realista?
Múltiples sombras en capas: una muy suave (gran blur, baja opacidad), una más afilada, un borde duro. Material Design lo popularizó. Ejemplo: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24).
¿Qué es la sombra inset?
La sombra inset (interior) cae dentro del elemento — da efecto presionado/hundido. Sintaxis: box-shadow: inset 0 0 10px rgba(0,0,0,0.3). Para estado activo de botones, look hundido en campos de entrada.
¿Drop shadow vs box shadow?
box-shadow sigue la forma rectangular del elemento. filter: drop-shadow() sigue la forma real (PNG transparentes, formas irregulares). Para SVG transparentes drop-shadow es esencial. En rendimiento box-shadow es ligeramente más rápido.

Herramientas relacionadas