Aprende a crear profundidad y legibilidad con box-shadow (sombras de caja) y text-shadow (sombras de texto).
box-shadow añade una o varias sombras a un elemento (desplazamiento, difuminado, extensión y color).
text-shadow mejora la legibilidad del texto o crea efectos tipográficos.
Puedes combinar múltiples sombras en una sola declaración.
Usar sombras sutiles da profundidad sin saturar el diseño.
Sombra de caja: desplazamiento, blur, spread y color.
La sintaxis típica es: box-shadow: offset-x offset-y blur-radius spread color. offset-x y offset-y mueven la sombra; blur-radius la difumina; spread la expande o contrae; color define el tono. Puedes usar inset para una sombra interna.
Sombra en el texto.
text-shadow: offset-x offset-y blur-radius color. Útil para texto sobre imágenes o para efectos de relieve (múltiples sombras con poco desplazamiento).
Aprende a crear profundidad y legibilidad con box-shadow (sombras de caja) y text-shadow (sombras de texto).
Código del tema: display: grid; gap: 1rem;
Sombra de caja: desplazamiento, blur, spread y color.
La sintaxis típica es: box-shadow: offset-x offset-y blur-radius spread color. offset-x y offset-y mueven la sombra; blur-radius la difumina; spread la expande o contrae; color define el tono. Puedes usar inset para una sombra interna.
.card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.card:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}Sombra en el texto.
text-shadow: offset-x offset-y blur-radius color. Útil para texto sobre imágenes o para efectos de relieve (múltiples sombras con poco desplazamiento).
h1 {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}