El generador de sombras (box-shadow) te permite ajustar efectos de sombra en tiempo real con controles deslizantes, admite varias sombras superpuestas y ofrece 8 preajustes seleccionados, incluidos Material, Neumorphism y Neon — luego copia el CSS al instante.
Características
- 5 parámetros ajustables: desplazamiento X (izquierda/derecha), desplazamiento Y (arriba/abajo), radio de desenfoque (suavidad del borde), radio de extensión (tamaño total) y opacidad — cada uno con su propio control deslizante.
- Sombras multicapa: haz clic en «Añadir capa de sombra» para apilar varias sombras — los diseños reales suelen usar 2–3 capas para una profundidad más natural (como en Material Design).
- Sombra interior (Inset): activa Inset para voltear la sombra al interior del elemento — ideal para efectos de botón pulsado o tarjetas hundidas.
- 3 fondos de vista previa: alterna entre fondos Claro, Oscuro y Degradado para comprobar cómo se ve la sombra sobre distintas superficies.
- 8 preajustes seleccionados: Flat, Subtle, Card, Material (3 capas), Dramatic, Neon Blue, Neumorphism e Inset.
- Copia de CSS con un clic: obtén la sintaxis completa box-shadow: ...; lista para pegar en cualquier archivo CSS, propiedad style de Tailwind o herramienta de diseño.
¿Cómo se usa?
- Usa los controles deslizantes para ajustar desplazamiento, desenfoque, extensión y opacidad: la vista previa se actualiza al instante.
- Para una profundidad más natural, añade capas de sombra extra o activa Inset para una sombra interior.
