¿Por qué varias capas de sombra?

Las sombras reales nunca son un único bloque difuso. El sistema de elevación de Material apila 2-3 sombras: una densa, oscura y poco extendida cerca del borde, más otra más amplia y clara hacia fuera. La primera capa pinta encima, la última al fondo - usa los botones arriba/abajo para reordenar.

¿Para qué sirve inset?

Una sombra inset se pinta dentro de la padding-box del elemento en lugar de fuera. Así se consiguen botones hundidos, campos rebajados o efectos de sombra interna. Las sombras inset se pintan sobre el fondo pero bajo el contenido, y no empujan el borde hacia afuera.

¿Cómo hago una sombra neumórfica?

El neumorfismo usa dos sombras opuestas sobre un fondo ligeramente coloreado: una sombra oscura abajo a la derecha (`8px 8px 16px rgba(0,0,0,0.10)`) y un brillo claro arriba a la izquierda (`-8px -8px 16px rgba(255,255,255,0.85)`). El preajuste Neumorfismo carga esta pila lista para retocar. El efecto exige una superficie gris claro o coloreada - sobre blanco puro el brillo desaparece.

¿Por qué no se ve mi box-shadow?

Tres sospechosos habituales. (1) Un padre tiene `overflow: hidden` y recorta la sombra. (2) El elemento es inline - box-shadow necesita block, inline-block o flex item para renderizar. (3) El elemento no tiene fondo, así que una sombra inset es invisible al faltar superficie donde pintar.

¿Qué diferencia hay entre desenfoque y expansión?

El desenfoque suaviza el borde de la sombra - más desenfoque = degradado más amplio. La expansión agranda o reduce la sombra antes de desenfocar - positivo la hace mayor que el elemento, negativo menor (útil para sombras que «levantan» el elemento siendo más estrechas).

¿box-shadow o filter: drop-shadow?

Usa `box-shadow` para cajas rectangulares - es más barato de renderizar y soporta multi-capa + inset. Usa `filter: drop-shadow()` para formas no rectangulares como PNG con transparencia o SVG, porque sigue el canal alfa en vez de la bounding box. No son intercambiables cuando la forma no es un rectángulo.

¿Cuántas capas de sombra como máximo?

Pasadas 4-5 capas dejas de ganar profundidad visible y empiezas a pagar coste de composición. El sistema de elevación de Material se queda en 3 capas por nivel por esa razón. Si apilas más, los valores probablemente se pelean - prueba a duplicar la expansión de una capa.

Generador de sombra CSS

Apila varias sombras CSS con preajustes, vista previa en vivo y declaración lista para copiar.

Funciona en tu navegador

Apila tantas capas como necesites. Cada capa: offset X / Y, desenfoque, expansión, color hex con slider de opacidad, switch inset, además de reordenar y silenciar. Empieza desde un preajuste (elevación Material 1-16, neumorfismo, anillo de foco, sombra larga, resplandor) o construye desde cero. La vista previa alterna entre fondo claro y oscuro y cambia de forma (redondeado, píldora, círculo) - el diseño de sombras depende del fondo, así puedes verificar ambas superficies antes de publicar.

Preajustes

Capas de sombra

Desenfoque

Expansión

Opacidad: 10%

Interna

Desenfoque

Expansión

Opacidad: 10%

Interna

CSS

box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.10), 0px 4px 16px 0px rgba(0,0,0,0.10);

Vista previa

Cómo usarla

Elige un preajuste
Elevación Material 1-16, neumorfismo, anillo de foco, sombra larga, resplandor - un clic carga las capas.
Ajusta las capas
Sliders de offset X / Y, desenfoque, expansión + selector hex con opacidad separada. Los números se actualizan al arrastrar.
Reordena o silencia
Los botones arriba/abajo cambian el orden de pintado (la primera = encima). El ojo silencia una capa sin perder sus valores.
Previsualiza ambas superficies
Alterna fondo claro/oscuro y forma redondeado/píldora/círculo - el diseño depende del fondo.
Copia el CSS
La declaración `box-shadow:` completa está lista para pegar en tu hoja de estilos.

¿Qué es?

Un generador de box-shadow construye la declaración `box-shadow:` a partir de una lista de capas. La sintaxis completa de una capa es `[inset?] <offset-x> <offset-y> <desenfoque> <expansión> <color>`, separadas por comas para varias capas. Los navegadores las pintan de adelante hacia atrás en el orden escrito - la primera queda arriba. Offsets negativos: sombra hacia arriba y la izquierda; positivos: hacia abajo y la derecha (convención de coordenadas de pantalla).

Cuándo usarla

Sistemas de elevación de tarjetas (Material, iOS, design systems propios), anillos de foco para accesibilidad, formas neumórficas, inputs en relieve, sombras de iconos dentro de tarjetas, feedback hover/press, popovers y tooltips, overlays modales. Donde recurrirías a Photoshop para fingir profundidad, CSS box-shadow lo hace nativo, se anima bien y respeta la transparencia.

Errores comunes

Sombras totalmente opacas - parecen contornos toscos. Expansión mayor que desenfoque - anillo duro en vez de desvanecido suave. Olvidar que las sombras inset se pintan en la padding-box, no sobre el borde. Elegir valores perfectos sobre fondo blanco que rompen en modo oscuro (la vista previa oscura aquí lo evita). Y aplicar box-shadow a un elemento inline sin cambiar su display - no pasa nada.

Preguntas frecuentes

¿Por qué varias capas de sombra?: Las sombras reales nunca son un único bloque difuso. El sistema de elevación de Material apila 2-3 sombras: una densa, oscura y poco extendida cerca del borde, más otra más amplia y clara hacia fuera. La primera capa pinta encima, la última al fondo - usa los botones arriba/abajo para reordenar.
¿Para qué sirve inset?: Una sombra inset se pinta dentro de la padding-box del elemento en lugar de fuera. Así se consiguen botones hundidos, campos rebajados o efectos de sombra interna. Las sombras inset se pintan sobre el fondo pero bajo el contenido, y no empujan el borde hacia afuera.
¿Cómo hago una sombra neumórfica?: El neumorfismo usa dos sombras opuestas sobre un fondo ligeramente coloreado: una sombra oscura abajo a la derecha (`8px 8px 16px rgba(0,0,0,0.10)`) y un brillo claro arriba a la izquierda (`-8px -8px 16px rgba(255,255,255,0.85)`). El preajuste Neumorfismo carga esta pila lista para retocar. El efecto exige una superficie gris claro o coloreada - sobre blanco puro el brillo desaparece.
¿Por qué no se ve mi box-shadow?: Tres sospechosos habituales. (1) Un padre tiene `overflow: hidden` y recorta la sombra. (2) El elemento es inline - box-shadow necesita block, inline-block o flex item para renderizar. (3) El elemento no tiene fondo, así que una sombra inset es invisible al faltar superficie donde pintar.
¿Qué diferencia hay entre desenfoque y expansión?: El desenfoque suaviza el borde de la sombra - más desenfoque = degradado más amplio. La expansión agranda o reduce la sombra antes de desenfocar - positivo la hace mayor que el elemento, negativo menor (útil para sombras que «levantan» el elemento siendo más estrechas).
¿box-shadow o filter: drop-shadow?: Usa `box-shadow` para cajas rectangulares - es más barato de renderizar y soporta multi-capa + inset. Usa `filter: drop-shadow()` para formas no rectangulares como PNG con transparencia o SVG, porque sigue el canal alfa en vez de la bounding box. No son intercambiables cuando la forma no es un rectángulo.
¿Cuántas capas de sombra como máximo?: Pasadas 4-5 capas dejas de ganar profundidad visible y empiezas a pagar coste de composición. El sistema de elevación de Material se queda en 3 capas por nivel por esa razón. Si apilas más, los valores probablemente se pelean - prueba a duplicar la expansión de una capa.