Front End Tools </>

Generador de Box-Shadow CSS

La propiedad box-shadow es una de las herramientas más versátiles en CSS para añadir profundidad y dimensión a tus elementos web. Con nuestro generador, puedes crear efectos de sombra personalizados sin necesidad de recordar la sintaxis compleja o calcular valores manualmente.

Ajusta todos los parámetros (desplazamiento, difuminado, extensión, color y opacidad) y visualiza los cambios en tiempo real. Obtén el código en formato CSS nativo, con variables CSS o como clases de Tailwind, listo para copiar y pegar en tu proyecto.

¿Qué es la propiedad box-shadow en CSS?

La propiedad box-shadow permite añadir efectos de sombra alrededor del marco de un elemento HTML. Es una de las propiedades más utilizadas para crear profundidad y jerarquía visual en interfaces web modernas.

La sintaxis completa de la propiedad box-shadow es:

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

Parámetros de box-shadow explicados

  • Desplazamiento X (offset-x): Posición horizontal de la sombra. Valores positivos mueven la sombra a la derecha, negativos a la izquierda.
  • Desplazamiento Y (offset-y): Posición vertical de la sombra. Valores positivos mueven la sombra hacia abajo, negativos hacia arriba.
  • Difuminado (blur-radius): Radio de desenfoque. Cuanto mayor sea el valor, más borrosa será la sombra. Un valor de 0 crea una sombra con bordes nítidos.
  • Extensión (spread-radius): Radio de propagación. Valores positivos expanden la sombra, negativos la contraen. Un valor de 0 mantiene la sombra del mismo tamaño que el elemento.
  • Color: Color de la sombra, incluyendo su opacidad. Se puede especificar en cualquier formato de color CSS (hexadecimal, RGB, RGBA, HSL, etc.).
  • Inset: Opcional. Si se incluye, la sombra se dibuja dentro del elemento (como si el contenido estuviera hundido). Por defecto, las sombras son externas.

Múltiples sombras

Una característica poderosa de box-shadow es la capacidad de aplicar múltiples sombras a un solo elemento, separadas por comas. Esto permite crear efectos más complejos y realistas:

box-shadow: 0 0 10px rgba(0, 0, 255, 0.5), 0 0 20px rgba(0, 0, 255, 0.3), 0 0 30px rgba(0, 0, 255, 0.1);

Compatibilidad con navegadores

La propiedad box-shadow es compatible con todos los navegadores modernos. Para navegadores más antiguos, se pueden utilizar prefijos específicos del navegador, aunque hoy en día rara vez son necesarios:

-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1); -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.1);

Para más información sobre la compatibilidad con navegadores, puedes consultar Can I Use.

Consejos para usar box-shadow efectivamente

  • Mantén las sombras sutiles - En la mayoría de los casos, las sombras sutiles crean interfaces más elegantes. Usa valores pequeños de difuminado y opacidad reducida para lograr efectos naturales.
  • Considera la dirección de la luz - Para crear interfaces coherentes, mantén una dirección de luz consistente en toda tu aplicación (generalmente desde arriba).
  • Usa sombras para indicar elevación - Elementos con sombras más pronunciadas parecen estar más "elevados" en la interfaz, lo que ayuda a establecer jerarquía visual.
  • Combina con otras propiedades - Para efectos más realistas, combina box-shadow con otras propiedades como border-radius, transform y transition.
  • Optimiza para rendimiento - Las sombras complejas pueden afectar el rendimiento, especialmente en dispositivos móviles. Usa la propiedad will-change o considera alternativas como imágenes para casos extremos.

Recursos adicionales

Con nuestro generador de box-shadow, puedes experimentar libremente hasta encontrar el efecto perfecto para tu proyecto. Una vez satisfecho, simplemente copia el código generado y aplicado a tus elementos HTML.