Diseña box shadows, gradientes y efectos modernos como glassmorphism y neumorphism con preview en tiempo real. Copia el CSS listo para usar al instante.
/* CSS aparecerá aquí */
Box shadows, gradientes, glassmorphism y más, con código listo para copiar.
Crea sombras suaves o dramáticas con múltiples capas. Controla offset X/Y, difusión (blur), expansión (spread), color y opacidad por capa. Presets incluidos: Card, Elevated, Glow, Inset, Sharp.
Casos de uso: cards, botones con elevación, modales, efectos de profundidad.
Genera gradientes de 2 o más colores con control de ángulo, posición de cada color y tipo (linear, radial, conic). Presets de combinaciones populares incluidos.
Casos de uso: fondos de hero, botones, separadores, backgrounds de secciones.
Crea el efecto de vidrio esmerilado que usa backdrop-filter: blur(). Controla el nivel de desenfoque, transparencia, saturación y borde.
Casos de uso: cards sobre gradientes, modales, navbars con fondo translúcido, sidebars.
Genera el efecto neomórfico con dos sombras (clara y oscura) que simulan relieve. Modos: Flat (elevado), Pressed (hundido) y Convex (convexo). El color de fondo debe coincidir con el de la página.
Casos de uso: dashboards, controles de UI, botones de toggle, indicadores.
Controla el radio de las 4 esquinas de forma independiente. Crea desde botones con esquinas redondeadas hasta formas completamente asimétricas y orgánicas. Presets para los valores más comunes.
Casos de uso: botones, cards, avatares, decoraciones, formas personalizadas.
Elige entre Box Shadow, Gradiente, Glassmorphism, Neumorphism o Border Radius según el efecto que necesitas crear.
Usa los sliders y selectores de color del panel izquierdo. Puedes añadir múltiples capas de sombra con el botón "+ Añadir sombra", o cargar presets para empezar desde una base conocida.
El panel derecho muestra el elemento con el efecto aplicado, actualizado en tiempo real mientras ajustas los controles. El fondo del preview cambia según el tipo de efecto.
El código CSS aparece en el panel inferior del generador. Usa el botón "Copiar CSS" para copiarlo al portapapeles. El código incluye todos los prefijos de navegador necesarios (como -webkit-backdrop-filter).
Copia el CSS en tu archivo .css, dentro de un tag <style>, o en el atributo style de un elemento. Cambia .element por el selector de tu elemento real.
Las cards translúcidas sobre fondos con gradientes vibrantes siguen siendo populares en dashboards, landing pages y apps. La clave es un gradiente de fondo con colores contrastantes y blur de 12-20px.
En lugar de una sombra grande y dura, se usan 2-3 capas con diferentes difusiones y opacidades muy bajas. Esto imita cómo las sombras reales se comportan bajo luz difusa. Material Design 3 y Tailwind lo usan como estándar.
Las formas asimétricas con diferentes radios por esquina crean elementos más dinámicos y humanos. Popular en ilustraciones, badges y elementos decorativos. La propiedad border-radius acepta hasta 8 valores.
Los mesh gradients crean transiciones de color multidireccionales que parecen pintadas. Actualmente difíciles de lograr con CSS puro (requieren múltiples radial-gradients superpuestos). La alternativa más sencilla es exportar como imagen SVG desde Figma.
| Caso de uso | CSS |
|---|---|
| Card mínimal | 0 1px 3px rgba(0,0,0,.06) |
| Card elevada | 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1) |
| Botón hover | 0 10px 15px -3px rgba(37,99,235,.3) |
| Modal / overlay | 0 25px 50px -12px rgba(0,0,0,.25) |
| Sidebar | 4px 0 16px -4px rgba(0,0,0,.08) |
Soporte de backdrop-filter
Rendimiento de box-shadow
Animar box-shadow directamente fuerza repintado. Para transiciones de sombra fluidas, anima el opacity de un pseudoelemento ::after que contiene la sombra. Resultado: 60fps garantizados.
Transición suave en gradientes
CSS no puede animar gradientes directamente (no hay interpolación). El truco: usa background-position con un gradiente más grande, o anima la opacidad de dos elementos superpuestos. En 2025, @property permite animaciones de gradiente en Chrome.
