Inicio / CSS y color / Generador de sombras CSS
Generador de sombras CSS
Las sombras dan profundidad solo cuando se comportan como la luz. Mueve los controles, observa la tarjeta y copia el CSS. Un desplazamiento vertical pequeño con desenfoque amplio y opacidad baja es lo que quiere casi cualquier interfaz.
Cómo se usa
- Fija el desplazamiento horizontal y vertical.
- Ajusta desenfoque, extensión, color y opacidad.
- Marca inset para una sombra interior y copia la regla.
Ejemplos
- 0 8px 24px −4px al 25%: la elevación de tarjeta moderna.
- 0 1px 2px al 15%: un borde sutil para botones.
- Inset con poco desenfoque hace que un campo parezca hundido.
Preguntas frecuentes
¿Por qué mis sombras se ven grises y apagadas?
Porque el negro puro con mucha opacidad aplana todo. Tiñe la sombra hacia el tono del fondo y mantén baja la opacidad: una sombra azul oscura sobre una página cálida resulta mucho más natural que el negro plano.
¿Puedo apilar varias sombras?
Sí, separándolas con comas en una sola declaración. Dos o tres capas con desenfoques crecientes imitan la luz real mucho mejor que una sombra dura, y así construyen la elevación casi todos los sistemas de diseño.
Herramientas relacionadas
Actualizado: 2026-08-07