Diseña sombras CSS multicapa con controles visuales en tiempo real
box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1);
También podrías necesitar
La propiedad `box-shadow` de CSS es una de las más versátiles y complejas del lenguaje: permite apilar múltiples sombras con control individual de desplazamiento, desenfoque, extensión, color, opacidad y dirección (exterior/interior). Entender todos los parámetros a la vez — especialmente la diferencia entre blur (desenfoque gaussiano) y spread (expansión del radio de la sombra) — puede resultar confuso sin una herramienta visual. Este generador permite diseñar sombras con múltiples capas simultáneas, lo que es la técnica usada en sistemas de diseño modernos como Tailwind CSS, shadcn/ui y Material Design para crear sombras de aspecto más natural y sofisticado. Cada capa tiene control independiente de offsetX, offsetY (desplazamiento horizontal y vertical), blur (suavizado), spread (expansión o contracción), color en hex con opacidad independiente, e inset (sombra interior vs exterior). El preview muestra la sombra sobre un fondo de checkerboard para que veas el efecto real con transparencias. La salida es el CSS listo para copiar.
¿Cuál es la diferencia entre blur y spread en box-shadow?
Son dos parámetros distintos: `blur` (desenfoque) determina qué tan difuminado es el borde de la sombra — un valor de 0 da bordes duros, valores más altos dan bordes suaves y difusos. `spread` (extensión) hace que la sombra sea más grande (valores positivos) o más pequeña (valores negativos) que el elemento original sin cambiar su suavidad. Usar spread negativo con blur alto es la técnica estándar para sombras de alta fidelidad (ej. Tailwind shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1)).
¿Para qué sirve el modo inset?
La palabra clave `inset` hace que la sombra se proyecte hacia el interior del elemento en lugar de hacia afuera. Útil para crear efectos de relieve (como un botón presionado), bordes iluminados, texturas o indicadores de foco. Los inputs con estado activo en muchos frameworks usan sombras inset para el ring de focus.
¿Por qué usar múltiples capas de sombra?
Una sola sombra tiende a verse artificial. Los sistemas de diseño modernos combinan 2-3 capas: una sombra grande y muy transparente (para el ambiente), una mediana (para el volumen) y una pequeña y más opaca (para el contacto con la superficie). Esta técnica se llama 'layered shadow' y es la que usa Tailwind, Material Design y Apple HIG. El resultado es más natural porque imita cómo la luz real crea sombras.
¿Puedo usar rgba en lugar de hex?
Esta herramienta convierte automáticamente el color hex + opacidad a rgba al generar el CSS. El color picker te da control del color base y el slider de opacidad controla el canal alfa. El output siempre usa rgba() para compatibilidad universal con todos los navegadores modernos.
¿El CSS generado funciona en todos los navegadores?
Sí. La propiedad box-shadow sin prefijos es soportada por todos los navegadores modernos (Chrome, Firefox, Safari, Edge). No necesitas -webkit-box-shadow ni -moz-box-shadow. Si necesitas soporte para IE9+, la propiedad también funciona. IE8 e inferiores no soportan box-shadow pero representan menos del 0.01% del tráfico global.