Para qué sirve el generador de box-shadow
La propiedad box-shadow agrega una o varias sombras alrededor de cualquier elemento HTML y es la herramienta principal para dar sensación de profundidad y elevación en una interfaz. Con ella creás las cards que parecen flotar sobre el fondo, los botones con relieve, los modales que se despegan de la página y los menús desplegables que se apoyan por encima del contenido. Una sombra combina cinco ingredientes: cuánto se desplaza en horizontal (offset-x) y vertical (offset-y), qué tan difusa es (blur), cuánto se expande antes de difuminarse (spread) y de qué color y opacidad es. Este generador te deja mover cada valor con sliders o escribirlo a mano, ver el resultado en vivo sobre un fondo cuadriculado —para notar las transparencias— y copiar el código box-shadow listo para pegar. Además podés apilar varias capas y activar el modo inset para sombras internas.
Los parámetros de box-shadow, uno por uno
La sintaxis es box-shadow: offset-x offset-y blur spread color; (más la palabra inset opcional al principio). Esta tabla resume qué hace cada valor, qué rango suele usarse y qué pasa cuando es negativo:
| Parámetro | Qué hace | Valores típicos | Si es negativo |
|---|---|---|---|
| offset-x | Desplaza la sombra en horizontal. | 0 en cards; ±2–10px para luz lateral. | La sombra se corre hacia la izquierda. |
| offset-y | Desplaza la sombra en vertical. | 4–20px (simula luz cenital). | La sombra sube, como luz desde abajo. |
| blur-radius | Difumina el borde de la sombra. | 0 = dura; 8–30px = suave y moderna. | No se permite: se ignora, mínimo 0. |
| spread-radius | Expande o contrae la sombra antes del blur. | 0 en la mayoría de los casos. | Contrae la sombra: queda más chica que el elemento. |
| color | Color y opacidad (idealmente rgba). | rgba negro con 4–15% de alfa. | No aplica (no hay color negativo). |
| inset | Proyecta la sombra hacia adentro. | Inputs presionados, drop zones, neumorphism. | No aplica (es una palabra clave, no un número). |
box-shadow vs drop-shadow vs text-shadow
Tres propiedades distintas hacen sombras en CSS y conviene no confundirlas:
| Propiedad | Sobre qué proyecta | Soporta inset / spread | Cuándo usarla |
|---|---|---|---|
box-shadow | La caja del elemento (respeta border-radius). | Sí a ambos. | Cards, botones, modales, elevación de UI. |
filter: drop-shadow() | Los píxeles reales, incluida la transparencia de PNG/SVG. | No a ninguno; va por GPU. | Íconos, imágenes recortadas, formas irregulares. |
text-shadow | Los glifos del texto. | No (sin spread ni inset). | Legibilidad de texto sobre imágenes, títulos. |
El truco de apilar varias sombras
Las sombras "premium" que ves en Stripe, Vercel o Linear no son una sola: son dos o tres capas apiladas. Una corta y nítida pegada al elemento (offset-y de 1–2px, blur bajo, opacidad media) y otra larga y difusa más abajo (offset-y de 8–24px, blur alto, opacidad baja). Así se imita la luz real, que proyecta una sombra directa y otra indirecta. Con el botón "+ agregar sombra" apilás capas y el generador las une con coma:
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 8px 24px rgba(15, 23, 42, 0.10);Sombras internas (inset) y neumorphism
La palabra clave inset lleva la sombra hacia adentro del elemento y simula una superficie hundida. Casos legítimos: inputs en estado presionado, contenedores que parecen excavados en la página y zonas de arrastre activas. El efecto neumorphism combina dos sombras: una clara arriba-izquierda y otra oscura abajo-derecha, para que el elemento parezca del mismo material que el fondo, apenas relevado. Probá el preset "Neumorphism" para ver el patrón.
Sombras y dark mode
Sobre fondos oscuros las sombras negras casi desaparecen: negro sobre negro no contrasta. Tres soluciones prácticas:
- Bordes claros en lugar de sombra:
border: 1px solid rgba(255,255,255,0.08). - Sombras más opacas (20–40% en vez de 8–12%) y con más blur.
- Sombras de color: una sombra teñida con el color de marca a baja opacidad da un efecto de glow en vez de profundidad.
Rendimiento: cuándo puede romperse el frame rate
A diferencia de filter: drop-shadow(), que va por GPU, box-shadow se calcula en CPU. Un blur grande sobre decenas de elementos, o animar el blur en tiempo real, puede tirar la fluidez. Si necesitás animar una sombra al pasar el mouse, animá transform o hacé una transición de opacidad sobre una capa de sombra ya renderizada, en lugar de recalcular el blur en cada frame.