Generador de Sombra de Caja CSS

En CSS, la propiedad box-shadow se usa para crear efectos de sombra para elementos HTML. Esta propiedad permite añadir una sombra a la caja (elemento) en la que se aplica, creando profundidad y separación del fondo. La propiedad box-shadow puede crear una variedad de efectos de sombra especificando parámetros como la posición, el tamaño, el color y el radio de difuminado de la sombra.

Aquí está la sintaxis básica para la propiedad box-shadow:

• h-shadow: Este parámetro especifica la posición horizontal de la sombra. Un valor positivo mueve la sombra a la derecha, y un valor negativo la mueve a la izquierda.
• v-shadow: Este parámetro especifica la posición vertical de la sombra. Un valor positivo mueve la sombra hacia abajo, y un valor negativo la mueve hacia arriba.
• difuminado: Este parámetro define el radio de difuminado de la sombra, creando un efecto de sombra más o menos difuso. Usa un valor de 0 para una sombra nítida.
• expansión: Este parámetro controla el tamaño de la sombra, expandiéndola o contrayéndola. Un valor positivo expande la sombra, y un valor negativo la contrae.
• color: Este parámetro especifica el color de la sombra.

Aquí tienes un ejemplo de cómo usar la propiedad box-shadow para crear un efecto de sombra simple para una caja:

En este ejemplo:

• La clase .shadow-element aplica una sombra a la caja.
• 10px especifica una sombra horizontal de 10 píxeles.
• 10px especifica una sombra vertical de 10 píxeles.
• 10px establece el radio de difuminado en 5 píxeles, creando un ligero difuminado.
• 10px es el valor de expansión (sin expansión).
• #888888 define el color de la sombra como gris.

Puedes personalizar la propiedad box-shadow para crear una variedad de efectos de sombra, incluyendo sombras internas, múltiples sombras y efectos visuales más complejos. Es una propiedad versátil para añadir profundidad y dimensión a los elementos en tu página web.