Generador de sombras CSS
Ajusta desplazamiento, desenfoque, expansión, color y opacidad de una sombra CSS, combina hasta cinco capas y copia el código de box-shadow o text-shadow viendo el resultado en directo.
Cómo usar el generador de sombras
- Elige si quieres sombrear una caja (
box-shadow) o un texto (text-shadow). - Parte de un ejemplo o ajusta los deslizadores. Los valores en píxeles aparecen junto a cada etiqueta.
- Añade capas para sombras más realistas; selecciona en el desplegable la capa que quieres modificar.
- Cambia el color del elemento y del fondo para ver cómo quedará en tu diseño real, y copia el CSS.
Sintaxis de box-shadow y text-shadow
box-shadow: [inset] desplazamiento-x desplazamiento-y desenfoque expansión color;
text-shadow: desplazamiento-x desplazamiento-y desenfoque color;
- Desplazamiento X e Y: valores positivos mueven la sombra hacia la derecha y hacia abajo; negativos, hacia la izquierda y arriba. Simulan la posición de la luz.
- Desenfoque: cuanto mayor, más difusa y amplia la sombra. Con 0 el borde es nítido.
- Expansión (solo box-shadow): agranda o encoge la sombra antes de desenfocarla. Un valor negativo con desplazamiento vertical da sombras que «flotan» bajo el elemento.
- inset: dibuja la sombra por dentro, como si el elemento estuviera hundido. Útil en campos de formulario.
El color con transparencia se expresa como rgba(): una opacidad del 18 % sobre un azul casi negro (#0F172A) se escribe rgba(15, 23, 42, 0.18). Usar un tono oscuro del propio fondo en lugar de negro puro hace que la sombra parezca más natural.
Escala de elevación de ejemplo
Los sistemas de diseño definen niveles de elevación con sombras cada vez más largas. Una escala sencilla:
| Nivel | Uso | box-shadow |
|---|---|---|
| 1 | Tarjetas en reposo | 0 1px 3px rgba(15,23,42,.12) |
| 2 | Tarjeta al pasar el ratón | 0 4px 12px rgba(15,23,42,.12) |
| 3 | Menús desplegables | 0 10px 24px -4px rgba(15,23,42,.18) |
| 4 | Ventanas modales | 0 24px 48px -12px rgba(15,23,42,.30) |
Consejos y errores comunes
- Negro al 50 %: es el error más típico. Las sombras reales son suaves; empieza con opacidades del 10–20 %.
- Una sola dirección de luz: usa el mismo sentido de desplazamiento en todo el sitio para que la interfaz sea coherente.
- Sombras y esquinas: box-shadow respeta el
border-radiusdel elemento. Ajusta las esquinas con el generador de border-radius. - Texto legible: una text-shadow sutil puede mejorar la lectura de texto sobre fotos o degradados, pero no sustituye a un buen contraste.
- Transiciones: si animas la sombra al pasar el ratón, usa una curva de aceleración suave; puedes diseñarla con el generador cubic-bezier.
Cuando tengas tu hoja de estilos terminada, puedes reducir su tamaño con el minificador de CSS.
Preguntas frecuentes
¿Qué significan los valores de box-shadow?
En orden: desplazamiento horizontal, desplazamiento vertical, desenfoque, expansión y color. Por ejemplo, box-shadow: 0 4px 12px 0 rgba(0,0,0,.12) crea una sombra suave que cae 4 px hacia abajo.
¿Cómo pongo varias sombras en un elemento?
Sepáralas con comas en la misma propiedad. La primera de la lista se dibuja encima de las demás. Combinar una sombra corta y nítida con otra larga y difusa da un aspecto más realista.
¿Qué diferencia hay entre box-shadow y filter: drop-shadow()?
box-shadow sigue la caja del elemento (con su border-radius), mientras que drop-shadow() sigue la forma real del contenido, incluidas las transparencias de un PNG o un SVG. drop-shadow no admite expansión ni inset.
¿Las sombras afectan al rendimiento?
Una sombra estática apenas cuesta. Lo que penaliza es animar box-shadow en muchos elementos: es mejor animar la opacidad de un pseudoelemento que ya tiene la sombra.