Podemos utilizar sombras de caja para crear un efecto visual en el que un elemento parece flotar sobre el fondo. Este efecto puede aportar profundidad, resaltar elementos específicos y añadir interés visual a una página web. Para lograrlo, se puede aplicar la propiedad box-shadow.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x se refiere a la posición horizontal de la sombra; un valor positivo desplaza la sombra hacia la derecha del elemento y un valor negativo la desplaza hacia la izquierda;
• offset-y se refiere a la posición vertical de la sombra; un valor positivo desplaza la sombra hacia abajo y un valor negativo la desplaza hacia arriba;
• blur-radius define el grado de desenfoque de la sombra y es un valor opcional; un valor mayor produce una sombra más difusa;
• spread-radius también es opcional, aumenta o disminuye el tamaño de la sombra según su valor positivo o negativo;
• color especifica el color de la sombra utilizando cualquier formato de color válido, y también es un valor opcional.

Nota

Para encontrar la sombra más adecuada, visita la fuente generador de sombras.

Además de la propiedad box-shadow, las propiedades text-shadow y drop-shadow nos permiten crear sombras para el texto y otros elementos, respectivamente. Funcionan de la misma manera que la propiedad box-shadow. Sin embargo, estas propiedades se utilizan con menor frecuencia en comparación con box-shadow..