Saltar al contenido
arnaud.app

Generador de sombra de elevación Material

Generador de elevación Material Design gratuito con vista previa en vivo. Obtén el box-shadow multicapa exacto de cada nivel, ajústalo y copia el CSS - sin registro.

Funciona en tu navegador

Material Design transmite profundidad con la « elevación »: cuanto más alto está un elemento, más amplia y suave es su sombra. Cada nivel es una pila precisa de dos o tres capas box-shadow. Este generador carga esas capas (elevación 1 a 16) para clavar Material exactamente, ajustar a tu gusto y copiar el CSS de tarjetas, barras de app, botones de acción flotantes y diálogos.

box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.20), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);

Cómo usarla

  1. Elige un preajuste

    Elevación Material 1-16, neumorfismo, anillo de foco, sombra larga, resplandor - un clic carga las capas.

  2. Ajusta las capas

    Sliders de offset X / Y, desenfoque, expansión + selector hex con opacidad separada. Los números se actualizan al arrastrar.

  3. Reordena o silencia

    Los botones arriba/abajo cambian el orden de pintado (la primera = encima). El ojo silencia una capa sin perder sus valores.

  4. Previsualiza ambas superficies

    Alterna fondo claro/oscuro y forma redondeado/píldora/círculo - el diseño depende del fondo.

  5. 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.
¿Puedo exportar a Tailwind o filter: drop-shadow?
Sí - cambia el selector de salida. El modo Tailwind emite un valor arbitrario `shadow-[…]` con colores hex de 8 dígitos para que varias capas sobrevivan a la coma. El modo drop-shadow emite una cadena `filter: drop-shadow()` para formas no rectangulares; ignora la expansión y el inset, que `box-shadow` sí admite.

Generador de sombra CSS

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

Probar →

Más en esta categoría