Generador de Sombras CSS

Ajusta los parámetros y copia el código box-shadow listo para tu proyecto.

Desplazamiento X 10px

Desplazamiento Y 10px

Desenfoque (Blur) 15px

Propagación (Spread) 0px

Opacidad de Sombra 0.3

Sombra Interior (Inset)

Color Sombra

Color Caja

Color Fondo

box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.3);

¿Qué es la propiedad Box-Shadow en CSS?

En el diseño web moderno, añadir profundidad y relieve a los elementos ayuda a guiar la atención del usuario. La propiedad box-shadow de CSS te permite aplicar una o múltiples sombras a un elemento HTML.

Valores del Box-Shadow:

Desplazamiento X e Y: Controlan la posición de la sombra horizontal y verticalmente.
Desenfoque (Blur): Define qué tan borrosa o definida es la sombra. Un valor en 0 creará una sombra completamente sólida.
Propagación (Spread): Ajusta el tamaño de la sombra. Valores positivos la expanden, valores negativos la contraen.
Inset: Convierte la sombra exterior en una sombra interior, creando un efecto de profundidad tipo "hueco".