Cómo usarla
- Elige un ajuste preestablecido o modifica el desplazamiento, el desenfoque, la expansión, el color y la opacidad de la primera capa.
- Añade más capas para conseguir una profundidad más natural o marca «Inset» para crear una sombra interior.
- Cambia el fondo de la vista previa y el color de la caja para adaptarlos a tu diseño y, después, copia el CSS.
Cómo funciona
box-shadow recibe, para cada capa, el desplazamiento horizontal y vertical, el radio de desenfoque, el radio de expansión y el color; se puede añadir inset al principio. Los desplazamientos positivos mueven la sombra hacia la derecha y hacia abajo. El desenfoque suaviza el borde y no puede ser negativo; la expansión agranda (si es positiva) o reduce (si es negativa) la sombra antes de aplicar el desenfoque. Las capas se separan con comas y la primera se dibuja encima de las demás.
Para crear una elevación realista, se suele combinar una sombra pequeña y definida con otra más grande y difusa, de baja opacidad. Eso es lo que hace el ajuste preestablecido «Elevated». Los colores se expresan con rgba() para indicar la opacidad de forma explícita. Las sombras siguen el border-radius del elemento y no ocupan espacio en el diseño, así que nunca desplazan a otros elementos.
Las sombras con valores de desenfoque muy altos en muchos elementos pueden ralentizar el desplazamiento en teléfonos de gama baja. Si animas una sombra, suele ser más fluido mostrar gradualmente un pseudoelemento que ya tenga la sombra que animar box-shadow directamente.
Ejemplos
Tarjeta sobre un fondo claro
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); da a una tarjeta un borde definido y un efecto de elevación suave.
Anillo de enfoque sin cambios en el diseño
Una capa con desplazamiento 0, desenfoque 0 y expansión de 3px en el color de marca crea un anillo sólido alrededor de un botón. A diferencia de un borde, no cambia el tamaño del elemento.
Campo de entrada presionado
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) hace que un campo de texto parezca ligeramente hundido.
Preguntas frecuentes
¿Qué diferencia hay entre box-shadow y filter: drop-shadow()?
box-shadow sigue la caja del elemento y su border-radius, y admite expansión y el valor inset. drop-shadow() sigue la forma visible, incluidas las zonas transparentes de las imágenes PNG o SVG, pero no admite expansión ni inset.
¿Por qué se recorta mi sombra?
Un elemento padre con overflow: hidden recorta todo lo que queda fuera de su caja, incluidas las sombras. Añade padding al elemento padre o cambia la regla de overflow.
¿Cuántas capas debería usar?
Una o dos capas suelen bastar para la mayoría de las interfaces. Añadir más puede suavizar el resultado, pero aumenta ligeramente el coste de renderizado, algo que importa en listas largas.
Privacidad
El CSS se genera en tu navegador. No se sube ni se guarda nada.