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.
- Desplazamiento X / Desplazamiento Y mueven la sombra a izquierda/derecha y arriba/abajo. Ambos pueden ser negativos, un desplazamiento Y negativo, por ejemplo, proyecta la sombra hacia arriba en lugar de hacia abajo.
- Desenfoque suaviza el borde de la sombra. Nunca puede bajar de cero, ya que un desenfoque negativo no es CSS válido.
- Expansión agranda o encoge la forma de la sombra antes de aplicar el desenfoque. A diferencia del desenfoque, la expansión SÍ puede ser negativa, muchos sistemas de sombras reales (incluidas las propias sombras de elevación de Material Design) usan una expansión negativa en su capa más compacta para evitar que se vea demasiado pesada.
- Interior convierte la sombra de una sombra proyectada hacia fuera a una hacia dentro, dibujada dentro de los bordes del elemento.
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. Cada preset aplica el propio enfoque de tres capas de MUI: una sombra “umbra” más oscura y compacta cerca del elemento, una “penumbra” más suave un poco más lejos, y una sombra “ambient” ancha y tenue debajo, la misma técnica de capas que hace que el sistema de elevación de Material Design se vea convincentemente tridimensional en lugar de plano. Haz clic en un preset para sustituir tus capas actuales por él, y sigue ajustando desde ahí.
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.
