Sombras CSS
Las sombras en CSS aportan profundidad visual a los elementos. La propiedad box-shadow se aplica a cajas y text-shadow a textos. Con ellas se puede resaltar contenido y crear diseños atractivos.
Ejemplo simple de box-shadow
En este ejemplo, se añade una sombra a un cuadro, desplazada hacia la derecha y abajo, ligeramente difuminada. El color es negro translúcido.
El ejemplo muestra el uso básico de la propiedad box-shadow.
Sintaxis de box-shadow
Box-shadow se compone de varios parámetros: desplazamiento horizontal y vertical, desenfoque, extensión y color. Combinándolos se obtienen distintos efectos.
| Parámetro | Descripción |
|---|---|
| h-offset | El desplazamiento horizontal de la sombra. |
| v-offset | El desplazamiento vertical de la sombra. |
| blur-radius | El radio de desenfoque de la sombra. |
| spread-radius | El radio de extensión de la sombra. |
| color | El color de la sombra. |
Consejos para usar sombras
Usa las sombras con cuidado para mantener un efecto natural y no afectar la legibilidad.
- Prefiere sombras suaves para un aspecto más natural.
- Combina varias sombras en un mismo elemento para un efecto de mayor profundidad.
- No abuses de las sombras, pueden afectar la claridad del diseño.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.