Box Shadow
Generator
Diseña sombras CSS perfectas con vista previa en vivo. Ajusta offset, blur, spread y color — apila múltiples capas para profundidad.
① Ajusta X, Y, blur, spread ② Agrega hasta 3 capas ③ Copia el CSS
box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.25);Los offsets X e Y controlan la dirección de la sombra. X positivo empuja a la derecha, negativo a la izquierda. Y positivo empuja hacia abajo.
El radio de blur suaviza los bordes de la sombra (0 = nítido). Spread expande o contrae la sombra más allá de los límites del elemento.
Las sombras inset aparecen dentro del elemento, creando un efecto hundido en lugar de una sombra exterior.
CSS box-shadow — cómo funciona y cuándo usarlo
La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Acepta offset horizontal (X), vertical (Y), radio de blur, radio de spread y color. Usa rgba() con opacidad parcial (0.1–0.25) para sombras suaves y realistas. La palabra clave inset coloca la sombra dentro del elemento para efectos de botón presionado. Apila múltiples sombras con valores separados por comas para lograr niveles de elevación de Material Design o efectos de neumorfismo. box-shadow no afecta el layout y es GPU-composited — a diferencia de filter: drop-shadow(), que sigue el canal alfa del elemento.