Cargando aplicación...
Preparando tu experiencia meskeIA
Crea box-shadow y text-shadow con editor visual
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);Desplazamiento horizontal y vertical de la sombra respecto al elemento
Desenfoque de la sombra. Mayor valor = más suave y difusa
Expansión de la sombra. Valores positivos la agrandan, negativos la reducen
Domina box-shadow y text-shadow para crear interfaces con profundidad y jerarquía visual
| Propiedad | Sintaxis | Aplica a | Efecto visual | Compatibilidad |
|---|---|---|---|---|
| box-shadow | x y blur spread color | Cualquier elemento de bloque | Sombra exterior o interior (inset) | ✅ Todos los navegadores |
| text-shadow | x y blur color | Solo texto | Sombra bajo los caracteres | ✅ Todos los navegadores |
| filter: drop-shadow() | x y blur color | Cualquier elemento, respeta forma | Sombra que sigue el contorno real (PNG, SVG) | ✅ Chrome 18+, Firefox 35+ |
| box-shadow inset | inset x y blur color | Elementos de bloque | Sombra interior (efecto hundido) | ✅ Todos los navegadores |
| Múltiple (coma) | sombra1, sombra2 | box-shadow y text-shadow | Capas de sombra apiladas | ✅ Todos los navegadores |
Crea sistemas de elevación (z-depth) consistentes para cards, modales y botones. Una sombra progresiva comunica la jerarquía visual sin necesidad de bordes ni colores adicionales.
Genera el código CSS listo para copiar en proyectos React, Vue o Angular. Crea sombras para hover states, focus rings accesibles y efectos de profundidad en componentes.
Crea efectos de texto con sombra para títulos impactantes en landing pages, banners y presentaciones. Las sombras de texto son clave en el estilo neón, retro y flat design.
Diseña sombras optimizadas para dispositivos con pantallas OLED donde las sombras oscuras son más económicas en batería. Adapta la intensidad según el modo claro/oscuro.
box-shadow: -5px -5px 10px #fff, 5px 5px 10px rgba(0,0,0,0.2). Solo funciona bien en modo claro con fondos grises.box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05). Las sombras se renderizan de la primera (superior) a la última (inferior). Esta técnica permite crear sombras suaves y realistas como las de Material Design o Tailwind.0 2px 2px rgba(0,0,0,0.14), 0 3px 1px rgba(0,0,0,0.12), 0 1px 5px rgba(0,0,0,0.20).Elige una única dirección de luz para toda la interfaz. Si la luz viene de arriba-izquierda, todos los box-shadow deben tener offset positivo en x e y.
Define 4-5 niveles de sombra como variables CSS. Úsalos consistentemente: nivel 1 para cards, nivel 2 para dropdowns, nivel 3 para modales.
Para hover con sombra animada, usa un pseudo-elemento ::after con la sombra final ya calculada y anima solo su opacity. 60fps garantizados.
Las sombras con el color de la marca (ej: sombra azul bajo botón azul) crean un efecto de brillo muy llamativo en CTAs y elementos hero.
Una sola sombra bien calibrada es más efectiva que cinco sombras mediocres. La mayoría de los diseños profesionales usan solo 2-3 niveles de sombra.
No uses box-shadow como único indicador de focus. Combínalo con outline para usuarios que navegan por teclado. Chrome añade focus rings automáticamente en algunos elementos.