Las sombras son uno de los recursos más usados en diseño de interfaces: separan tarjetas del fondo, dan sensación de profundidad y guían la atención. En CSS se crean con la propiedad box-shadow.
El Generador de box-shadow CSS te deja diseñarlas con sliders y copiar el código al instante.
Anatomía de box-shadow
La sintaxis básica es:
box-shadow: offsetX offsetY blur spread color;- offsetX: desplazamiento horizontal de la sombra.
- offsetY: desplazamiento vertical (positivo = hacia abajo).
- blur: desenfoque. Cuanto mayor, más difusa la sombra.
- spread: expansión. Agranda o encoge la sombra.
- color: color de la sombra, normalmente con transparencia (rgba).
También existe la palabra clave inset, que dibuja la sombra hacia dentro del elemento.
El secreto de una sombra realista
Las sombras duras y oscuras delatan un diseño poco cuidado. Para conseguir una sombra natural:
- Desplazamiento vertical pequeño (4–10px).
- Desenfoque alto (20–40px).
- Expansión ligeramente negativa.
- Opacidad baja (10–25%).
Esto imita cómo cae la luz natural sobre un objeto ligeramente elevado.
box-shadow: 0 8px 24px -4px rgba(17, 17, 16, 0.2);Sombras interiores (inset)
La sombra inset es perfecta para campos de formulario, botones presionados o efectos de relieve hundido:
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15);Cómo usar el generador
- Abre Generador de box-shadow CSS.
- Ajusta desplazamiento, desenfoque, expansión, color y opacidad con los sliders.
- Observa la vista previa en tiempo real.
- Copia el código y pégalo en tu CSS.
Funciona en cualquier proyecto: HTML puro, React, Vue o clases arbitrarias de Tailwind.
Herramientas relacionadas
- Generador de gradientes CSS.
- Convertir colores entre formatos.
- Verificador de contraste para la accesibilidad.
Todo ocurre en tu navegador, sin enviar nada a un servidor.
Compartir artículo
Prueba nuestras herramientas gratis
184 herramientas de imagen, PDF, vídeo y audio. Sin registro, sin límites, tus archivos no salen de tu dispositivo.
Ver todas las herramientas