Generador de Sombras CSS
Crea sombras box-shadow CSS con control de desplazamiento, desenfoque, expansión, color y opacidad, varias capas, inset y vista previa en vivo. Sin registro.
Qué hace esta herramienta
Genera el código box-shadow de CSS con controles visuales y vista previa en vivo: ajustas el desplazamiento, el desenfoque, la expansión, el color y la opacidad, apilas varias capas de sombra, activas el modo inset, y copias el CSS listo para pegar. En lugar de teclear números a ciegas y recargar, ves el efecto mientras lo mueves.
Cómo se lee un box-shadow
La propiedad tiene cinco partes, siempre en este orden:
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.15);
/* X Y blur spread color */
- X (desplazamiento horizontal) — mueve la sombra a la derecha (positivo) o a la izquierda (negativo).
- Y (desplazamiento vertical) — hacia abajo (positivo) o hacia arriba (negativo).
- Blur (desenfoque) — cuánto se difumina el borde. 0 da una sombra de borde nítido; valores altos, una nube difusa.
- Spread (expansión) — agranda (positivo) o encoge (negativo) la sombra antes de aplicar el desenfoque.
- Color — el tono, casi siempre con algo de transparencia.
Cómo usarla
- Mueve los deslizadores de X, Y, blur y spread mirando la vista previa.
- Ajusta el color y su opacidad.
- Añade capas si quieres una sombra más rica (ver más abajo).
- Activa
insetsi buscas una sombra interior. - Copia el CSS.
El secreto de las sombras que se ven bien: varias capas
La diferencia entre una sombra que parece de plantilla y una que parece de producto profesional casi nunca está en el color: está en cuántas sombras hay.
Una sola sombra marcada se ve dura y plana. Las sombras reales son suaves y se atenúan por capas: hay una parte cercana y algo definida, y una parte lejana y muy difusa. Reproducir eso en CSS significa apilar dos o tres sombras con desenfoques y opacidades crecientes:
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 4px 8px rgba(0, 0, 0, 0.06),
0 16px 24px rgba(0, 0, 0, 0.05);
Cada capa es más grande, más difusa y más tenue que la anterior. El resultado tiene una profundidad que una única sombra nunca consigue. La herramienta te deja añadir capas precisamente para esto.
Color con opacidad, no gris
Un error habitual es usar negro puro al 100%. Sobre un fondo de color, esa sombra se ve como una mancha pegada encima. La solución es negro con opacidad baja (rgba(0,0,0,0.15)), que deja que el fondo se transparente a través de la sombra y la integra.
En interfaces cuidadas se va un paso más allá: la sombra toma un tinte del propio color del fondo en vez de gris neutro. Una tarjeta sobre un fondo azulado proyecta una sombra ligeramente azul-oscura, no gris. El ojo lo percibe como “correcto” aunque no sepa por qué.
Sombra exterior vs. interior (inset)
Por defecto la sombra es exterior: se proyecta hacia fuera y hace que el elemento parezca elevado sobre la página. Es lo que da relieve a tarjetas, botones y menús.
Con la palabra inset, la sombra se dibuja dentro del elemento, dando sensación de hundido:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
Se usa para campos de formulario (parecen “encajados” en la página), botones en estado pulsado y efectos de relieve hacia dentro.
Un detalle técnico útil
box-shadow no ocupa espacio en la maquetación: se pinta fuera del flujo, así que no empuja a los elementos vecinos ni cambia el tamaño de la caja, al contrario que un border. Puedes añadir y quitar sombras sin que se descoloque nada alrededor.
La excepción a tener en cuenta: box-shadow sigue la caja rectangular del elemento (con su border-radius), pero no la forma real de una imagen con transparencia. Para que la sombra siga el contorno recortado de un PNG o un icono, se usa filter: drop-shadow() en lugar de box-shadow.
Preguntas frecuentes
¿Qué significan los valores de box-shadow?
Una sombra box-shadow tiene, en orden, el desplazamiento horizontal (X), el vertical (Y), el desenfoque (blur), la expansión (spread) y el color. X e Y mueven la sombra respecto al elemento; el blur define cuán difuminado está el borde; el spread agranda o encoge la sombra antes de difuminarla; y el color, normalmente con algo de transparencia, le da el tono. La herramienta te deja ajustar cada uno con vista previa en vivo.
¿Qué es una sombra inset?
La palabra inset convierte la sombra de exterior a interior: en vez de proyectarse hacia fuera, se dibuja dentro del elemento, dando sensación de hundido o de profundidad hacia dentro. Se usa para campos de formulario, botones pulsados y efectos de relieve. Sin inset, la sombra es exterior, que es lo habitual para elevar tarjetas y botones.
¿Cómo hago una sombra más realista?
El truco es apilar varias capas de sombra en lugar de usar una sola muy marcada. Las sombras reales son suaves y se difuminan gradualmente, así que combinar dos o tres sombras con desenfoques y opacidades distintas —una cercana y nítida, otra lejana y difusa— produce un resultado mucho más natural que una única sombra dura. La herramienta admite varias capas para esto.
¿Por qué conviene usar color con opacidad en vez de gris?
Porque una sombra negra al 100% se ve dura y artificial sobre cualquier fondo de color. Usar negro con opacidad (por ejemplo rgba con alfa bajo) deja que el fondo se transparente a través de la sombra, integrándola. En interfaces cuidadas, la sombra a menudo toma un tono del propio color del fondo, no un gris neutro, para sentirse parte de la escena.
¿box-shadow afecta al tamaño o a la maquetación?
No. La sombra se pinta fuera del flujo de la maquetación: no ocupa espacio ni empuja a los elementos vecinos, a diferencia de un borde. Por eso puedes añadir o quitar sombras sin que se descoloque nada. Si necesitas un efecto que sí respete la forma recortada del elemento (por ejemplo con border-radius e imágenes), a veces se recurre a filter drop-shadow en su lugar.
Reseñas y valoraciones
Aún no hay reseñas. ¡Sé la primera persona en opinar!
Herramientas relacionadas
Otras del catálogo que se usan bien junto a esta.