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.

Consejos de uso

  • 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.

Preguntas frecuentes

El radio de desenfoque (blur) controla cuán suave se ve el borde de la sombra: un valor mayor extiende el degradado sobre un área más amplia. El radio de expansión (spread), en cambio, cambia el tamaño de la propia forma de la sombra: los valores positivos la agrandan respecto al elemento y los negativos la reducen. Combinar ambos permite controlar con precisión la textura de la sombra.

La palabra clave inset dibuja la sombra dentro del borde del elemento en lugar de fuera de él. Mientras que un box-shadow normal hace que el elemento parezca flotar sobre la página, inset lo hace ver hundido o incrustado, algo que se usa a menudo para el borde de los campos de formulario.

La propiedad box-shadow de CSS acepta una lista de sombras separadas por comas, lo que permite superponer varias para lograr un aspecto más tridimensional. Esta herramienta se centra en generar una sola sombra por simplicidad; si necesitas varias capas, puedes añadir manualmente valores separados por comas al CSS generado.

box-shadow es una propiedad CSS estándar compatible con todos los navegadores modernos, incluido Internet Explorer 9 y versiones posteriores. Antes se requerían prefijos de proveedor como -webkit- y -moz-, pero hoy la propiedad funciona en todas partes sin prefijos.

Una sombra negra totalmente opaca (0% de transparencia) puede verse antinatural o demasiado intensa según el color de fondo. Reducir la opacidad para crear un negro o gris semitransparente produce una sombra más suave que se integra de forma natural con cualquier fondo.
ツールくん

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.

Más herramientas en esta categoría