Cargando...

Box-shadow CSS

El trabajo responsive te enseñó cuándo cambia el layout. Box-shadow abre Effects & Motion: profundidad suave alrededor de una tarjeta, aspecto hundido dentro de un campo o un levantamiento discreto en un botón — todo con una propiedad, box-shadow, sin cambiar el tamaño del box model.

Partes de la sombra

📊 Partes de box-shadow de un vistazo

Parte Trabajo habitual
offset-x / offset-y Dónde queda la sombra respecto a la caja (positivo = derecha / abajo)
blur-radius Suavidad — 0 es borde duro; valores mayores difuminan el borde
spread-radius Opcional; agranda o reduce la forma de la sombra antes del blur
color Suele ser rgba(...) para que la sombra quede semitransparente
inset Palabra clave opcional — dibuja la sombra dentro de la caja
Varias listas Sombras separadas por comas se apilan (lejos suave + cerca más nítida)

Piensa en elevación, no en decoración excesiva. Una capa suave bajo una tarjeta suele ganar a tres contornos ruidosos.

Elevación exterior suave

Receta habitual de tarjeta: poco offset hacia abajo, blur moderado, spread escaso o nulo, y un negro (o gris) translúcido. La sombra debe sugerir luz desde arriba — no un rectángulo negro pegado detrás de la caja.

Elevación calmada de tarjeta

css 
.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}

Un offset-y positivo deja la sombra debajo de la caja. Mantén el alpha bajo para que el texto y los vecinos sigan legibles.

inset — profundidad dentro de la caja

Añade la palabra clave inset para dibujar la sombra hacia adentro. Útil para pozos, botones pulsados o campos de entrada que deben sentirse un poco hundidos.

Pozo inset para un campo

css 
.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}

inset no sustituye border ni padding — solo cambia cómo parece caer la luz dentro del área pintada.

Sombras en capas

Lista más de una sombra separadas por comas. Una capa lejana y suave más otra más cercana y ceñida suele leerse como elevación natural sin un contorno pesado.

Levantamiento suave de dos capas

css 
.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}

El orden de la lista es el orden de pintura; ambas siguen perteneciendo al mismo elemento. Prefiere dos capas tranquilas a una mancha opaca.

Reset, acento y foco en la caja

Pon box-shadow: none cuando un estado deba volver a plano. Una sombra tintada puede apoyar un acento de marca — sigue con blur suave y alpha modesto. Recuerda: los glifos usan text-shadow (efectos de texto); las cajas usan box-shadow.

Reset plano y acento tintado

css 
.chip {
box-shadow: none;
}

.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}

Pruébalo tú

  1. Dale a una tarjeta blanca una sola sombra exterior suave (offset x 0, y pequeño, blur ~1rem, alpha baja).
  2. Añade una sombra inset a un campo de búsqueda para que se sienta un poco hundido.
  3. Sube un panel a una pila de dos capas (cerca + lejos).
  4. Encuentra cualquier box-shadow negro sólido en un archivo de práctica y suavízalo con rgba.
  5. Confirma que el brillo de un encabezado usa text-shadow, no box-shadow.

Errores frecuentes

  • Sombras negras totalmente opacas que parecen cajas duplicadas
  • Tratar blur y spread como el mismo mando
  • Poner box-shadow en texto cuando querías text-shadow
  • Sombrear cada ítem de lista, enlace e icono hasta que la página se vea brumosa
  • Olvidar inset cuando el diseño necesita aspecto pulsado o ahuecado

Resumen

  • box-shadow usa offset, blur, spread opcional, color e inset opcional
  • Las sombras exteriores suaves y translúcidas venden elevación calmada
  • Apila capas separadas por comas para más profundidad; usa none para aplanar
  • Caja ≠ glifo — reserva text-shadow para el texto
  • Siguiente en Effects & Motion: Transitions

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 58 de 63
Css Tutorial