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.
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).