Generador de sombras (box-shadow)
Crea un box-shadow de CSS de forma visual, con soporte para varias capas apiladas y sombras internas (inset).
Cómo funciona
Cada capa es un pequeño objeto con desplazamiento x/y, difuminado, extensión, color, opacidad y la marca «interior». Como los selectores de color HTML no permiten transparencia, el valor hexadecimal se descompone en sus bytes rojo, verde y azul y se recombina con el control de opacidad en un color rgba(). Todas las capas se unen con comas en una sola declaración box-shadow, y esa misma cadena se aplica a la vista previa, así que lo que ves es lo que copias. El orden importa: la primera sombra de la lista se dibuja encima, las siguientes quedan debajo.
Una sola sombra casi siempre se ve artificial. Las sombras reales tienen un núcleo denso y una caída suave y amplia, algo que 0 4px 12px rgba(0,0,0,0.25) no puede lograr por sí solo. El truco de cualquier sistema de diseño cuidado es apilar dos o tres sombras a baja opacidad: una ajustada como 0 1px 2px al 10% más una amplia 0 8px 24px al 8%. Por separado casi no se notan; juntas dan profundidad real.
Todo ocurre en el JavaScript de esta página: ningún color que elijas ni ningún CSS que generes se envía a ningún sitio, algo que la pestaña Red de las herramientas de desarrollador confirma mientras trabajas.
Preguntas frecuentes
¿Qué hace "Inset"?
Cambia la sombra de fuera de la caja a dentro, creando un aspecto tallado hacia dentro en lugar de flotante.
¿Puedo apilar varias sombras?
Sí, haz clic en «Añadir capa de sombra» para apilar más sombras, algo que box-shadow de CSS admite de forma nativa con valores separados por comas. Combinar una sombra suave y grande con otra más ajustada y oscura es una forma habitual de conseguir un efecto de profundidad más realista.
¿Se envía esto a algún sitio?
No, la vista previa y el CSS se generan por completo en tu navegador. No se sube nada.