Cómo usar el generador de sombras CSS
- Ajusta los controles de la Sombra 1 (color, opacidad, desplazamiento X/Y, desenfoque, expansión) y activa Interior si quieres una sombra hacia dentro en vez de una sombra proyectada.
- Haz clic en + Añadir capa de sombra para apilar otra sombra encima, o en el botón ✕ para eliminar una (mínimo una capa).
- Usa los botones ↑ / ↓ para reordenar las capas, la primera capa listada se renderiza encima, lo cual importa para sombras superpuestas o semitransparentes.
- O ve directo a un resultado con uno de los Presets de elevación, cinco combinaciones de sombra inspiradas en Material Design, de sutiles a dramáticas.
- Observa cómo la vista previa en vivo se actualiza al instante, y luego haz clic en Copiar CSS para obtener una declaración
box-shadow: ...;lista para pegar.
Todo ocurre localmente en tu navegador, sin subidas, sin cuenta, sin viaje de ida y vuelta a un servidor.
Construir sombras en capas sin adivinar valores
Una única declaración box-shadow es bastante fácil de escribir a mano, pero la profundidad realista casi siempre necesita más de una sombra apiladas juntas, una sombra oscura y compacta cerca del elemento más otra suave y tenue extendida más lejos, la misma técnica que usan los sistemas de diseño reales para imitar cómo la luz se dispersa de verdad. Conseguir esa combinación editando números CSS en bruto significa mucho ensayo y error en las herramientas de desarrollo. Esta herramienta invierte eso: ajusta controles reales para el desplazamiento, desenfoque, expansión, color y opacidad de cada sombra, observa cómo una vista previa en vivo se actualiza al instante, y solo ve el CSS una vez que ya se ve bien.
Un detalle que la especificación fija y conviene tener presente desde el principio: el desenfoque nunca puede bajar de cero, porque un radio de desenfoque negativo no es CSS válido, mientras que la expansión sí admite valores negativos.
Las cuatro longitudes, en el orden en que las lee CSS
Cada capa se escribe como desplazamiento en X, desplazamiento en Y, desenfoque, extensión y color, opcionalmente precedidas de inset.
- Desplazamiento X y Desplazamiento Y mueven la sombra hacia los lados y hacia abajo. Los dos aceptan valores negativos, así que una Y negativa lanza la sombra hacia arriba, que es como se finge una luz que viene desde abajo.
- Desenfoque suaviza el borde. Cero da una forma de borde duro, que es lo que quieres para las sombras de bloque desplazadas de un aspecto brutalista o retro.
- Extensión agranda o encoge la forma de la sombra antes de aplicar el desenfoque. Una extensión negativa es válida y genuinamente útil: mete la sombra más ajustada que la propia caja para que un desenfoque suave no se lea como un halo. Todos los preajustes de elevación de aquí usan una extensión negativa en su capa más ceñida.
- Inset cambia la capa de una sombra proyectada hacia fuera a una dibujada dentro de los bordes del elemento, que es el aspecto de botón pulsado, borde interior y campo hundido.
La muestra de color y el porcentaje de opacidad son campos separados a propósito. Casi toda sombra buena es un negro de baja opacidad o un tinte oscuro de baja opacidad del color de la superficie, y separar los dos deja en evidencia cuándo has construido sin querer una losa negra maciza.
Apilar, reordenar y borrar capas
El orden importa más de lo que la gente espera en cuanto se solapan capas semitransparentes, y importa sobre todo cuando una de las capas es interior. La primera capa de la lista es la que CSS dibuja encima, así que el orden cambia el resultado siempre que las capas se solapen. Si una pila parece más sucia que la suma de sus partes, prueba a mover la capa más ceñida a lo alto de la lista antes de empezar a cambiar números.
La última capa que queda no se puede eliminar, así que siempre hay algo que editar.
Presets de elevación estilo Material
En lugar de construir desde cero los looks habituales de “tarjeta elevada” o “diálogo flotante”, los cinco presets de elevación te dan un punto de partida listo a alturas crecientes, desde una sombra apenas perceptible adecuada para una tarjeta en reposo, hasta una sombra dramática de superposición adecuada para un diálogo modal. Al pasar el cursor por uno se muestra la descripción larga de para qué sirve. Haz clic en un preset para sustituir tus capas actuales por él, y sigue ajustando desde ahí.
De dónde salen realmente los cinco niveles de elevación
Los botones de preajuste van del nivel 1 al 5, subiendo desde una sombra de tarjeta en reposo apenas perceptible hasta una sombra pesada de superposición para diálogos. Cada uno aplica tres capas con opacidades del 20%, el 14% y el 12%, el reparto entre umbra, penumbra y ambiente que usa la propia implementación de elevación de Material-UI. Ese reparto de opacidad se mantiene constante entre niveles mientras las sombras se vuelven más grandes y suaves, aunque no según una regla ordenada: las dos capas exteriores se desenfocan más en cada paso, mientras que el desplazamiento y la extensión de la capa de umbra ceñida deambulan en lugar de crecer de forma monótona. Leer los valores de una escala real enseña más que suponer una.
Están modelados sobre los valores de Material-UI, ampliamente usados, y no sobre una especificación oficial de Google. Material Design no publica una tabla CSS canónica, y los distintos frameworks representan la elevación de forma diferente, así que trátalos como un punto de partida rodado y no como una cita.
Cópialo antes de cerrar la pestaña
No se guarda nada. No hay cuenta, ni llamada a servidor, ni almacenamiento local, ni estado en la URL, así que una recarga te devuelve a la única capa por defecto. Copia la declaración a tu hoja de estilos en cuanto tenga buen aspecto. Si el portapapeles no está disponible, cosa que pasa en algunos contextos incrustados y no seguros, la herramienta lo dice y el texto del recuadro de CSS se puede seleccionar y copiar a mano.
Desde aquí, tres herramientas vecinas recogen el testigo. El Generador de Gradientes CSS usa la misma forma de vista previa en vivo y después copiar, para fondos lineales, radiales y cónicos. El Conversor de Colores convierte un valor hexadecimal a RGB o HSL con alfa, que es lo que necesitas cuando tus tokens de diseño están guardados en una notación distinta de la que emite esta herramienta. Y una vez terminada la hoja de estilos, el Minificador de CSS la reduce para producción y muestra el tamaño antes y después.
Usos habituales
- Efectos “elevados” o “flotantes” en tarjetas y paneles.
- Estados de hover/activo/presionado en botones (incluidas sombras interiores para un look presionado).
- Anillos de foco y contornos de estado de validación en campos de formulario.
- Sombras de elevación en modales, diálogos y menús desplegables.
- Escalas de profundidad de sistemas de diseño (sutil → dramático) que igualan los niveles de elevación de Material Design.
