Generador de sombras CSS (box-shadow)
Una sola sombra casi nunca se ve convincente. La luz real produce al mismo tiempo una sombra de contacto oscura y nítida y otra ancha y suave, así que este generador te deja apilar capas y editar cada una por separado. Cambia el fondo de la vista previa a oscuro antes de darlo por terminado.
Preajustes
Capas
El degradado abarca aproximadamente esta distancia, la mitad por fuera del borde de la caja.
Agranda o encoge la sombra antes de desenfocarla.
Solo cambia la vista previa. El CSS de abajo queda igual.
Qué significan los cinco valores
Una sombra simple es offset-x offset-y blur spread color. El navegador lee las longitudes por su posición, así que no puedes reordenarlas, pero el color puede ir en cualquiera de los dos extremos: rgba(0,0,0,.2) 0 4px 8px es válido. Si omites el spread, vale cero. Si además omites el blur, obtienes un duplicado de la caja con bordes duros, que es todo el truco detrás del estilo de sombra plana desplazada.
El blur no es la distancia que recorre la sombra
Este es el valor que la gente malinterpreta. El radio de desenfoque no empuja la sombra más lejos. Dice qué tan ancho es el borde suave, y ese degradado está centrado justo donde habría estado el borde duro. Un blur de 24px reparte la transición a lo largo de unos 24 píxeles, aproximadamente la mitad por fuera del contorno de la caja y la otra mitad hacia adentro. La especificación lo define como una aproximación a un desenfoque gaussiano con una desviación estándar de la mitad del radio de desenfoque.
Dos consecuencias. Un blur grande sin spread negativo se derrama por los lados, y por eso una sombra pensada para quedar debajo de una tarjeta termina brillando a su alrededor. Y una sombra con blur pero sin desplazamiento se ve por los cuatro lados, porque la mitad de ese degradado se escapa en todas las direcciones.
El spread se aplica antes que el blur
El spread infla o desinfla el rectángulo de la sombra, y solo después se desenfoca el resultado. El spread negativo es la solución al problema de derrame anterior: 0 18px 36px -14px encoge la forma 14 píxeles primero, así que después del desenfoque casi nada se escapa hacia los lados y la sombra se lee como un charco debajo del elemento. La mayoría de los sistemas de sombras que se ven bien usan un spread negativo en su capa más grande.
Por qué una sola sombra siempre se ve falsa
Un objeto real bajo luz real proyecta dos cosas a la vez: una sombra de contacto pequeña, oscura y nítida justo donde toca la superficie, y otra mucho más grande, más tenue y difusa. Una sola sombra CSS puede ser una o la otra, nunca ambas, y por eso se lee como una calcomanía. Apilar de dos a cuatro capas con blur creciente y opacidad decreciente es toda la técnica, y es lo que hacen los preajustes Tarjeta y Elevada de arriba.
El color importa tanto como la geometría. El negro puro con poca opacidad vuelve gris todo lo que cubre, y eso se ve sucio sobre cualquier cosa con color. Teñir la sombra hacia una versión oscura del propio tono de la superficie —un azul marino profundo bajo una página gris azulada, por ejemplo— se lee como una sombra y no como una mancha. El valor por defecto aquí es un índigo muy oscuro exactamente por esa razón.
Inset, y dónde se pinta
Una sombra inset se dibuja dentro de la caja de padding, encima del fondo pero debajo del contenido. La recorta el radio de borde, así que sigue las esquinas redondeadas automáticamente. Las capas inset y las normales pueden aparecer en la misma lista: son independientes y se pintan de la primera a la última, con la primera capa arriba.
box-shadow frente a filter: drop-shadow
box-shadow sigue la caja de borde. Si tu elemento es un PNG transparente, un ícono SVG o algo recortado con clip-path, la sombra sale igual rectangular. filter: drop-shadow() sigue el canal alfa real y da la forma que querías, con un costo de renderizado mayor y sin ningún parámetro de spread.
Maquetación y rendimiento
Una sombra no ocupa espacio en el diseño. Nada se mueve para dejarle espacio, lo que significa que un ancestro con overflow: hidden la va a cortar por la mitad sin problema. Animar el blur o el spread también obliga al navegador a repintar la sombra en cada cuadro, lo que es caro en elementos grandes. En su lugar, pon la sombra en un pseudoelemento y anima su opacidad.
Hasta dónde llega esta herramienta
La vista previa muestra un elemento sobre un fondo plano. Las páginas reales ponen tarjetas sobre fotografías y degradados, y una sombra ajustada sobre gris puede desaparecer ahí: cambia el fondo de la vista previa antes de darla por buena. Las interfaces oscuras son el caso más difícil: el negro al 14% de opacidad es casi invisible sobre una superficie oscura, y la mayoría de los temas oscuros terminan usando un borde claro sutil, o una sombra mucho más pesada, en lugar de los mismos valores atenuados. Esta herramienta tampoco escribe text-shadow, que no admite valor de spread y es una propiedad distinta con una sintaxis distinta.
Preguntas frecuentes
¿Cuál es la diferencia entre blur y spread en box-shadow?
El spread cambia el tamaño de la forma de la sombra antes de cualquier desenfoque: positivo la hace más grande que la caja, negativo más pequeña. El blur luego suaviza el borde de esa forma, con el degradado centrado en el contorno, así que aproximadamente la mitad del desenfoque cae por fuera de él.
¿Cómo agrego varias sombras a un mismo elemento?
Sepáralas con comas dentro de una sola declaración box-shadow. La primera de la lista se pinta arriba. Una segunda regla box-shadow no agrega una capa: reemplaza por completo a la primera.
¿Por qué mi sombra se ve gris y sucia?
Porque es negro puro con poca opacidad, y eso desatura todo lo que queda debajo. Usa una versión muy oscura del tono de tu fondo en lugar de #000 y la misma geometría de pronto va a parecer luz en vez de suciedad.
¿Por qué mi box-shadow aparece cortado?
Una sombra no ocupa espacio en el diseño, así que un padre con overflow: hidden la recorta como a cualquier otro desbordamiento. Quita el recorte, agrega padding al padre, o mueve la sombra a un elemento que no esté dentro del área recortada.
¿Debo usar box-shadow o filter: drop-shadow?
Usa box-shadow para rectángulos y rectángulos redondeados, que es casi toda la interfaz. Usa filter: drop-shadow cuando el elemento tiene transparencia o un clip-path y necesitas que la sombra siga la forma visible en vez de la caja de borde.
Última actualización 19 de septiembre de 2026