Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
box-shadow agrega profundidad a tus elementos, simulando que "flotan" sobre la página.
Explicación
box-shadow acepta varios valores en un orden específico:
box-shadow: x y blur color;Desplazamiento horizontal, vertical, difuminado y color de la sombra, en ese orden.
rgba(0,0,0,0.15)Color con transparencia; las sombras casi siempre usan un color semi-transparente para verse naturales.
box-shadow: ... inset;La palabra inset convierte la sombra externa en una sombra interna, hundida hacia adentro del elemento.
Reto rápido
Agrega una segunda tarjeta con una sombra usando inset para compararlas.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Sombras suaves y sutiles (blur alto, opacidad baja) suelen verse más profesionales que sombras duras y muy oscuras.
Dato extra
Puedes combinar varias sombras en una sola propiedad separándolas por comas, para crear efectos de profundidad más elaborados.
Error común
Usar un color de sombra completamente opaco (sin transparencia): se ve como un bloque sólido pegado al elemento en vez de una sombra realista.
Siguiente paso
Con fondos, bordes y sombras, tus elementos ya se ven bien de forma individual. Ahora aprenderás a organizarlos en el espacio con Flexbox.
Ir a la siguiente lección