Generador de box-shadow CSS
Diseña sombras box-shadow de CSS visualmente con vista previa en vivo y código listo para copiar, todo en tu navegador.
Cargando Generador de box-shadow CSS… Si no ocurre nada, activa JavaScript.
La propiedad box-shadow de CSS pinta una sombra alrededor del marco de un elemento, y es una de las herramientas más importantes para dar a una interfaz web plana una sensación de profundidad y jerarquía. Una sombra bien medida le dice al usuario que una tarjeta está por encima de la página, que un botón es presionable, que un desplegable flota sobre el contenido de debajo. La propiedad es engañosamente rica: una sola declaración controla un desplazamiento horizontal, un desplazamiento vertical, un radio de difuminado, un radio de expansión, un color y si la sombra cae fuera del elemento o se talla dentro de él como un inset. Conseguir que esos valores se sientan naturales editando números a ciegas es lento, que es exactamente por lo que ayuda un generador visual.
Preguntas frecuentes
¿Se sube algo cuando diseño una sombra?
¿Qué controla cada valor de box-shadow?
¿Cuál es la diferencia entre difuminado y expansión?
¿Qué hace la opción inset?
¿Por qué el color generado usa rgba en lugar de un valor hexadecimal?
¿Puedo crear varias sombras apiladas?
¿Funcionan estas sombras en todos los navegadores?
¿Cómo hago una sombra suave y realista en lugar de una dura?
Acerca de Generador de box-shadow CSS
Este generador te da una caja de vista previa en vivo y un regulador para cada parámetro para que veas el efecto de cada cambio al instante. Los valores de desplazamiento mueven la sombra a izquierda, derecha, arriba o abajo para sugerir una fuente de luz. El radio de difuminado suaviza el borde, con cero produciendo una sombra de borde duro y valores mayores un resplandor difuso. El radio de expansión agranda o encoge la sombra antes de aplicar el difuminado, lo que es útil para ajustar o ampliar la huella. Un selector de color y un regulador de opacidad se combinan en el color final de la sombra, y una casilla de inset alterna entre una sombra exterior y una sombra interior que hace que un elemento parezca presionado o hundido.
A medida que ajustas los controles, la herramienta escribe la declaración box-shadow exacta en CSS estándar y sin prefijos de proveedor, lista para copiar a tu portapapeles con un clic. La salida usa un color rgba para que la opacidad quede incorporada correctamente, que es como se escriben casi siempre las sombras del mundo real, ya que el negro puro a plena intensidad se ve pesado y artificial. La vista previa se asienta sobre un tablero de ajedrez para que puedas juzgar con precisión las sombras suaves y semitransparentes en lugar de contra un único color plano.
Todo se ejecuta localmente en tu navegador, sin subidas, sin cuenta y sin seguimiento, y sigue funcionando sin conexión una vez cargada la página. No hay nada que enviar a ningún sitio porque todo el trabajo consiste en generar una cadena corta de CSS. El resultado es una forma rápida y táctil de afinar la elevación precisa que necesita un componente y de copiar código listo para producción sin memorizar el orden de los valores de box-shadow ni ajustar a mano el alfa de rgba por ensayo y error.
Cómo las sombras llegaron, se fueron y volvieron al diseño web
Antes de CSS3, poner una sombra en una caja significaba imágenes. Los diseñadores exportaban los bordes de la sombra como rebanadas PNG y las ensamblaban alrededor de un elemento con divs envoltorios extra, una técnica frágil que se rompía cada vez que la caja cambiaba de tamaño y añadía varias peticiones HTTP por componente. La propiedad box-shadow, estandarizada como parte del módulo CSS Backgrounds and Borders, llegó con prefijos de proveedor alrededor de 2009 en forma de -webkit-box-shadow y -moz-box-shadow, y alcanzar todos los navegadores llevó algunos años más hasta que Internet Explorer 9 añadió soporte.
Una vez que las sombras nativas estuvieron disponibles, la web atravesó una fase fuertemente sombreada. El diseño esqueuomórfico, que alcanzó su pico a principios de la década de 2010 y fue personificado por las interfaces de iOS de Apple de aquella época, se apoyó con fuerza en sombras, degradados y biseles para hacer que los elementos en pantalla imitaran objetos físicos: botones que parecían tallados en vidrio, paneles con cuero cosido, interruptores con sombras profundas. La propiedad box-shadow fue central en ese aspecto, a menudo apilada en varias capas sobre un único elemento.
Luego el péndulo osciló. El diseño plano, popularizado por el lenguaje Metro de Microsoft y el propio rediseño de iOS 7 de Apple en 2013, despojó las sombras casi por completo en favor del color sólido y la tipografía limpia. Pero la planitud pura hacía difícil saber qué era clicable, así que surgió un camino intermedio. El Material Design de Google replanteó las sombras no como decoración sino como un sistema de elevación, donde el tamaño y la suavidad de una sombra comunican cuánto flota un elemento por encima de la superficie de debajo. Esa idea sigue siendo la convención dominante hoy, que es por lo que pensar en las sombras en términos de elevación, en lugar de solo de oscuridad, produce interfaces que se sienten coherentes e intuitivas.