Generador de Box Shadow
Genera sombras CSS visualmente
Generador de Box Shadow CSS - Crear Sombras Visualmente
Anatomía de box-shadow en CSS
Box-shadow tiene 4-6 valores: offset-x (desplazamiento horizontal), offset-y (desplazamiento vertical), blur-radius (difuminado), spread-radius (expansión), color, y opcionalmente "inset" para sombra interior. Ejemplo: box-shadow: 5px 10px 15px 0 rgba(0,0,0,0.3). Offset determina dirección de la luz (valores negativos = luz desde abajo/derecha). Blur crea difuminado natural. Spread expande o contrae la sombra sin difuminar. El color con transparencia (rgba/hsla) crea sombras realistas. Puedes combinar múltiples sombras separadas por comas para efectos complejos.
Técnicas de sombra para diseño moderno
Tendencias actuales en sombras: soft UI/neumorfismo usa sombras sutiles claras y oscuras para efecto 3D; sombras de elevación (Material Design) indican jerarquía con blur creciente (8px para cards, 16px para modals, 24px para drawers); sombras coloreadas toman el color del elemento para efecto neón/glow; long shadows son sombras sólidas extendidas diagonalmente; múltiples sombras combinan una difuminada lejana con una nítida cercana para realismo. Esta herramienta permite experimentar con todas estas técnicas visualmente.
Rendimiento y alternativas a box-shadow
Box-shadow puede afectar rendimiento, especialmente con blur alto, spread grande, o muchos elementos con sombra en página. Para rendimiento óptimo: usa will-change: transform si animas el elemento; considera filter: drop-shadow() para formas no rectangulares (respeta transparencia PNG/SVG); para sombras estáticas grandes, una imagen de sombra puede ser más eficiente. En móviles, reduce complejidad de sombras. Chrome DevTools > Performance puede identificar si las sombras causan repaint costoso.
Preguntas frecuentes
¿Cuál es la diferencia entre box-shadow y drop-shadow?
box-shadow aplica sombra al cuadro del elemento (su bounding box rectangular). filter: drop-shadow() aplica sombra siguiendo la silueta real incluyendo transparencia, útil para PNGs con fondo transparente o SVGs. drop-shadow no soporta spread ni inset, pero respeta formas complejas.
¿Cómo creo una sombra solo en un lado?
Usa offset para direccionar y spread negativo para contener. Ejemplo sombra solo abajo: box-shadow: 0 10px 15px -10px rgba(0,0,0,0.3). El spread negativo (-10px) igual al offset compensa la expansión lateral. Ajusta blur según necesites difuminado.
¿Puedo usar variables CSS con box-shadow?
Sí, y es recomendable para consistencia. Define: --shadow-sm: 0 1px 2px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1). Úsalas con box-shadow: var(--shadow-md). Frameworks como Tailwind incluyen sistemas de sombras predefinidos.
¿Cómo hago sombras coloreadas que combinen con el elemento?
Usa el color del elemento con transparencia en la sombra. Para un botón azul (#3B82F6), usa box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4). Esto crea efecto de "glow" que se siente cohesivo. Para automatizar, Sass/SCSS puede manipular colores con transparentize() o ajustar con CSS color-mix() en navegadores modernos.