Generador CSS Box Shadow — Neumorfismo, Glassmorfismo y Tailwind
Generador CSS box shadow gratuito con vista previa en tiempo real. Crea sombras, efectos neumorfismo y glassmorfismo. Exporta a CSS, Tailwind o variables CSS.
Actualizado mayo de 2026
Revisado por Rafael Duarte
box-shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
shadow-xl
--shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
Shift+Enter copia el CSS
Cómo funciona
Controles deslizantes visuales, tres formatos de salida
1. Mueve los sliders
Despl. X, Despl. Y, Blur, Spread y Opacidad — la vista previa se actualiza al instante mientras ajustas cada valor.
2. Elige el modo o un preset
Estándar, Neumorfismo o Glassmorfismo — o haz clic en cualquier preset de la galería para aplicarlo directo.
3. Copia CSS, Tailwind o variable
`Shift+Enter` copia el CSS al instante desde cualquier parte de la herramienta, sin tocar el ratón.
Qué hace esta herramienta
Tres estilos de sombra en un solo generador
Neumorfismo calculado automáticamente
Genera las dos sombras opuestas (clara y oscura) a partir del color de fondo que elijas, sin cálculos manuales.
Glassmorfismo con contexto real
Muestra la vista previa sobre un fondo degradado de color, incluyendo el prefijo -webkit- que Safari necesita.
Exportación en tres formatos
CSS puro, clase utilitaria de Tailwind o custom property — copia el formato que ya usa tu proyecto.
Presets de Material Design y más
Elevaciones listas de Material, sombras estilo iOS, tarjetas sutiles y efectos neón sin escribir un solo valor.
Vista previa en 4 tipos de elemento
Alterna entre tarjeta, botón, campo de texto y círculo para ver la sombra aplicada en formas distintas, con fondo claro u oscuro.
Biblioteca de 19 presets en 7 categorías
Abre la galería completa en un modal y navega visualmente por Material, iOS, Cards, Buttons, Glow e Inset.
Ejemplos de box-shadow
Cuándo vas a necesitar esto
Los escenarios más comunes entre quienes usan esta herramienta
Elevación estilo Material Design
Apila una sombra discreta y cercana con otra difusa y lejana para lograr profundidad realista.
Efecto neón en botones y badges
Offset en cero con blur alto genera un brillo ambiental en vez de una sombra direccional clásica.
Soft UI (neumorfismo)
Tarjetas y botones con efecto plástico 3D — cambia entre Plano, Presionado y Cóncavo según lo que necesites.
Tarjetas de vidrio esmerilado
Glassmorfismo sobre fondo de color o imagen, con el fallback correcto para que también se vea bien en Safari.
Comparar la misma sombra en distintos elementos
Prueba tarjeta, botón, campo de texto y círculo uno junto al otro antes de decidir qué profundidad encaja con tu diseño.
Validar la sombra en modo oscuro
Cambia la vista previa a fondo oscuro y confirma que la sombra sigue siendo visible antes de publicar la interfaz.
Errores comunes
Usar box-shadow en vez de drop-shadow para íconos
box-shadow se aplica al rectángulo del elemento; drop-shadow sigue la forma visual real, incluso en un PNG transparente.
Olvidar el prefijo -webkit-backdrop-filter
Sin este prefijo, el efecto de glassmorfismo desaparece por completo en Safari para iOS y macOS.
Animar box-shadow directamente en el hover
Provoca repaint en cada frame y afecta el rendimiento. Anima opacity sobre un pseudo-elemento que ya tenga la sombra aplicada.
Neumorfismo con bajo contraste
El estilo suave del soft UI es atractivo pero puede volverse ilegible. Verifica siempre el contraste del texto sobre el fondo neumórfico contra los criterios WCAG antes de publicar.
Editar a mano el valor arbitrario de Tailwind
Las clases shadow-[...] requieren guion bajo en lugar de espacio en cada valor. Copia siempre con el botón de copiar — editar a mano rompe la sintaxis JIT de Tailwind.
Por qué usar esta herramienta
Ningún otro generador combina sombra estándar, neumorfismo y glassmorfismo en un mismo lugar — el modo Neu calcula las dos sombras automáticamente, algo que en otras herramientas exige hacer cuentas a mano con el color de fondo.
El CSS que se genera queda listo para producción, con los prefijos de compatibilidad (como -webkit-backdrop-filter) ya incluidos, así que no hay que acordarse de agregarlos después.
Puedes probar la misma sombra en tarjeta, botón, campo de texto y círculo, con fondo claro u oscuro, antes de decidir qué profundidad funciona — todo en el navegador, sin instalar nada y sin crear cuenta.
box-shadow vs. filter: drop-shadow
Dos formas de agregar sombra, con propósitos distintos
Preguntas frecuentes
Añade uno o más efectos de sombra alrededor de la caja de un elemento — con desplazamiento horizontal, vertical, blur, spread y color. Se pueden apilar varias sombras separándolas por comas.
Referencias
Herramientas relacionadas
- Verificador de Contraste de Colores Diseño Verificador de contraste de colores gratuito — verifica conformidad WCAG 2.2 AA y AAA al instante. Vista previa en vivo, simulación de daltonismo y...
- Conversor de Colores Diseño Convierte colores entre HEX, RGB, HSL y CMYK al instante. Selector de color gratuito online con comprobador de contraste WCAG y generador de paletas.
- Generador de Paleta de Colores Diseño Genera paletas de colores armoniosas desde cualquier color base. Elige armonía Análoga, Complementaria, Triádica o Tetrádica — exporta como CSS variables o...
- Paleta de Colores desde Imagen Diseño Extrae paletas de colores de cualquier imagen — obtén códigos HEX, RGB, HSL y exporta como CSS variables, Tailwind, JSON o PNG. 100% en el navegador, sin...
- Generador CSS Flexbox Diseño Generador CSS Flexbox gratis: vista previa en tiempo real, CSS y Tailwind simultáneos, 10 layouts predefinidos, avisos contextuales y exportación React/JSX. Sin registro.
