Generador de sombras CSS (box-shadow)
Ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad con controles deslizantes para generar un box-shadow de CSS con vista previa en vivo. Copia el código generado con un clic.
Qué hace box-shadow
La propiedad CSS `box-shadow` proyecta una sombra desde un elemento. Su valor enumera el desplazamiento horizontal, el vertical, el radio de desenfoque, el radio de expansión y el color, en ese orden; pero **cuatro números seguidos, con una diferencia entre desenfoque y expansión que las palabras no acaban de transmitir**, la convierten en una propiedad fatigosa de escribir a mano. Esta herramienta le permite mover cada valor con un deslizador y ver el resultado al instante.
Lo que define el carácter de una sombra es la combinación más que las magnitudes. **Las sombras que se leen como naturales suelen mantener el desplazamiento pequeño, el desenfoque amplio y la opacidad baja**; si aleja el desplazamiento y sube la opacidad, obtiene algo de bordes duros, como recortado y pegado. Añadir `inset` proyecta la sombra hacia dentro del elemento y produce un aspecto hundido. El código generado se copia con un clic y todo se ejecuta en su navegador.
Cómo construir una sombra
- Fije los desplazamientos Esto determina la dirección aparente de la luz. Mantener X en cero y Y ligeramente positivo suele leerse con naturalidad.
- Ajuste el radio de desenfoque Es la suavidad del borde de la sombra. Los valores altos la extienden más amplia y tenue.
- Ajuste el radio de expansión Engorda o adelgaza la sombra misma. **A diferencia del desenfoque, no cambia la dureza del borde.**
- Elija el color y la opacidad El negro semitransparente es la opción segura, pero un tono oscuro cercano al fondo aplicado con suavidad se integra mejor.
- Copie el código Pegue el valor de `box-shadow` generado directamente en su hoja de estilos.
Consejos para aprovecharla mejor
- Puedes escribir valores exactos en los campos numéricos en lugar de arrastrar los controles deslizantes cuando necesites precisión.
- Activa "inset" para dibujar la sombra dentro del elemento, creando un efecto hundido en lugar de uno elevado.
- Aumentar el spread agranda todo el contorno de la sombra, mientras que aumentar el blur suaviza y difumina sus bordes; combina ambos para lograr distintas texturas.
- Reducir la opacidad hace que la sombra se sienta más ligera y natural, algo muy útil cuando los elementos se superponen sobre fondos de color.
- El CSS generado se puede pegar directamente en tu hoja de estilos; combina especialmente bien con efectos hover en botones y tarjetas.
Situaciones en las que resulta útil
Dar profundidad a tarjetas y botones
Basta una sombra leve para que quede mucho más claro que un elemento se puede pulsar.
Elevar modales y desplegables
La intensidad de la sombra expresa a qué altura flota el panel sobre el contenido de detrás.
Reproducir la sombra de una maqueta
Al traducir a CSS los ajustes de sombra de una herramienta de diseño, puede igualar los valores comparando a la vez.
Crear un aspecto hundido
Con `inset` puede ensayar tratamientos que hagan parecer que un campo de entrada se hunde en la página.
Términos de box-shadow explicados
- Desplazamiento
- Cuánto se corre la sombra. El primer valor es horizontal y el segundo vertical; los positivos la mueven a la derecha y hacia abajo.
- Radio de desenfoque
- Cuánto se suaviza el borde de la sombra. **En cero obtiene una sombra de contorno nítido.**
- Radio de expansión
- Cuánto se agranda la sombra. Un valor negativo la encoge.
- inset
- La palabra clave que proyecta la sombra dentro del elemento, produciendo un aspecto rehundido.
- Opacidad
- La densidad de la sombra, dada como el valor alfa de `rgba()`. **Una sombra demasiado densa se lee como pesada.**
- Sombras múltiples
- Pueden superponerse varias sombras separadas por comas. Una sombra oscura y ceñida sobre otra amplia y tenue resulta convincente.
Preguntas frecuentes
A propósito — cómo box-shadow cambió la expresividad del diseño web
Antes de que box-shadow se estandarizara en CSS3, crear una sombra en la web solía implicar prerrenderizarla en una imagen de fondo con un editor gráfico, o simularla apilando varios elementos div con fondos degradados. Incluso un pequeño ajuste en la forma o suavidad de la sombra obligaba a rehacer la imagen, lo que hacía la iteración de diseño lenta y costosa.
Cuando los navegadores empezaron a implementar box-shadow como parte de CSS3 alrededor de 2009, una sombra pudo generarse con una sola declaración CSS. Ya no hacían falta recursos de imagen, las páginas se volvieron más ligeras de cargar y las sombras mantenían su forma correctamente incluso cuando el diseño se adaptaba de forma responsiva.
Cuando Google presentó Material Design en 2014, construyó el concepto de "elevation" sobre box-shadow: a cada elemento se le asigna una altura en el eje Z, y los elementos situados más arriba proyectan sombras más grandes y oscuras. Esto dio a interfaces por lo demás planas una sensación de profundidad y jerarquía, una idea que todavía influye en muchos sistemas de diseño actuales.