Cómo se usa
- Ajusta Desplazamiento horizontal y Desplazamiento vertical para colocar la sombra.
- Ajusta Desenfoque para suavizar los bordes y Extensión para ampliar o reducir la sombra.
- Elige Color y ajusta Opacidad mientras observas la vista previa.
- Marca Interior (inset) si quieres la sombra dentro de la caja.
- Pulsa + Añadir capa para combinar sombras y ajusta los valores de la nueva capa.
Ejemplos
Sombra suave para una tarjeta de producto
Entrada
Desplazamiento horizontal: 0; Desplazamiento vertical: 8; Desenfoque: 24; Extensión: 0; Color: #2451E8; Opacidad: 0.35; Interior (inset): desmarcado.
Salida
box-shadow: 0 8px 24px 0 rgba(36, 81, 232, 0.35);
Dos capas para una tarjeta de noticias
Entrada
Primera capa: desplazamientos 0 y 2, desenfoque 4, extensión -2. Segunda capa: desplazamientos 0 y 4, desenfoque 6, extensión -1. Ambas: color #000000, opacidad 0.1, sombra exterior.
Salida
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
Sombra interior para un botón pulsado
Entrada
Desplazamiento horizontal: 0; Desplazamiento vertical: 2; Desenfoque: 4; Extensión: 0; Color: #000000; Opacidad: 0.25; Interior (inset): marcado.
Salida
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25);
Consejos
- Elige el color de la sombra con Códigos de colores HTML.
- Combínala con un fondo degradado del Generador de degradados CSS.
Preguntas frecuentes
¿Cuántas sombras puedo combinar y cuál queda encima?
Puedes combinar hasta 4 capas. La primera se dibuja encima de las demás; cambia el orden con ↑ Subir y ↓ Bajar.
¿El CSS incluye el color de fondo y el radio de la caja?
Color de la caja, Fondo y Radio solo cambian la muestra. El CSS generado contiene únicamente la declaración box-shadow.
¿Puedo usar rem o valores decimales?
No: solo se admiten píxeles enteros, sin rem ni otras unidades. Los rangos son de −200 a 200 para los desplazamientos y la extensión, y de 0 a 300 para el desenfoque. Opacidad admite valores de 0 a 1 y se redondea a dos decimales.
¿Por qué no cambia la sombra al editar un valor?
Si un campo tiene un valor inválido, el CSS y la vista previa mantienen la última sombra válida. Corrige el campo señalado; si el error está en otra capa, su pestaña queda marcada.