Generador de degradados CSS
Degradados lineales, radiales y cónicos.
Diseño
Generador de sombras CSS
Sombras box-shadow con vista previa.
Qué hace. Esta herramienta genera código box-shadow con vista previa en directo. El truco que distingue una sombra creíble de una plana no es ajustar el desenfoque, sino apilar varias sombras.
Funciona en tu navegadorNo se sube nadaSin registroFunciona sin conexión
Cómo usar Generador de sombras CSS
- Ajusta desplazamiento, desenfoque, extensión y color.
- Añade capas si quieres una sombra más realista.
- Copia el CSS resultante.
Los cinco valores
La sintaxis es box-shadow: desplazamiento-x desplazamiento-y desenfoque extensión color.
| Valor | Qué hace |
|---|---|
| Desplazamiento X | mueve la sombra a los lados |
| Desplazamiento Y | la mueve arriba o abajo |
| Desenfoque | suaviza el borde |
| Extensión | agranda o encoge la sombra |
| inset | la dibuja hacia dentro |
Solo los dos desplazamientos son obligatorios. El resto tiene valores por defecto, así que box-shadow: 0 2px rgba(0,0,0,.2) es válido.
La extensión con valor negativo es más útil de lo que parece: encoge la sombra y evita que asome por los lados, lo que resulta muy natural en sombras suaves y bajas.
La palabra inset convierte la sombra en interior. Sirve para hundir un campo de formulario o marcar un estado presionado.
Y se pueden encadenar varias sombras separadas por comas, algo que es la base de la siguiente sección.
Una sombra sola casi nunca es creíble
Esta es la diferencia práctica entre una sombra que parece de plantilla y una que parece diseñada.
En el mundo real, una sombra tiene varias componentes: una zona oscura y estrecha muy cerca del objeto, y una difusa y amplia mucho más lejos.
Una sola sombra CSS no puede representar las dos cosas, así que hay que apilarlas. Dos o tres capas bastan: la primera corta y algo más opaca, las siguientes más largas, más difusas y más transparentes.
Un ejemplo de estructura sería una capa a 1px con 2px de desenfoque, otra a 4px con 8px, y otra a 10px con 20px, cada una con menos opacidad que la anterior.
La segunda regla: no uses negro puro. Una sombra negra sobre fondo de color se ve sucia. Usa un tono oscuro del mismo color del fondo, o un azul muy oscuro, y con transparencia.
La tercera: mantén la dirección coherente en toda la interfaz. Si la luz viene de arriba, todas las sombras van hacia abajo. Sombras en distintas direcciones dentro de la misma pantalla se notan aunque no se sepa por qué.
Rendimiento y alternativas
Algunas cosas que conviene saber antes de llenarlo todo de sombras.
Las sombras con mucho desenfoque son costosas de renderizar, especialmente en móviles. Animar el desenfoque directamente provoca tirones.
El truco habitual para animar una elevación es tener dos sombras superpuestas y animar su opacidad, o usar un pseudoelemento con la sombra grande y animar su opacity. Eso sí se acelera por hardware.
Si necesitas una sombra que siga la silueta de una imagen con transparencia en vez del rectángulo del elemento, box-shadow no sirve: la propiedad correcta es filter: drop-shadow().
Para una sola línea fina, un borde o un outline suele ser mejor opción que una sombra sin desenfoque, y es más barato de pintar.
Y en modo oscuro las sombras pierden buena parte de su efecto, porque hay poco margen para oscurecer más. La solución habitual es indicar elevación con un fondo algo más claro en lugar de con una sombra.
Preguntas frecuentes
¿Por qué mi sombra parece plana?
Porque es una sola capa. Apila dos o tres, la primera corta y opaca y las siguientes más difusas.
¿Debo usar negro puro?
No. Un tono oscuro del color de fondo con transparencia queda mucho más limpio.
¿Para qué sirve la extensión negativa?
Encoge la sombra para que no asome por los lados, algo muy natural en sombras suaves.
¿Cómo animo una sombra sin tirones?
Anima la opacidad de dos sombras superpuestas, no el desenfoque.
¿Y en modo oscuro?
Pierden efecto. Indica elevación con un fondo algo más claro.
¿Se envían mis datos?
No.
Guías sobre Generador de sombras CSS
- CSS Gradients, Shadows and Palettes7 min read