CSS Box-Shadow Generator

Crea sombras CSS simples y múltiples visualmente con vista previa en tiempo real.



px
px
px

{{ cssOutput }}

¿Qué es CSS box-shadow?

La propiedad CSS box-shadow agrega una o más sombras a un elemento. Las sombras crean profundidad y hacen que elementos como tarjetas, botones y diálogos destaquen del fondo.

La sintaxis de box-shadow

La sintaxis es: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X y Offset-Y determinan la posición de la sombra. El radio de desenfoque controla la suavidad, el radio de expansión agranda o reduce la sombra.

Consejos para sombras perfectas

  • Usa múltiples sombras con diferentes valores de desenfoque para resultados más realistas.
  • Mantén los colores de sombra sutiles: usa tonos negros transparentes en lugar de colores fuertes.
  • Las sombras inset funcionan muy bien para botones presionados y campos de entrada.
  • Prueba las sombras en modo claro y oscuro, ya que pueden verse diferentes.