Fondos, bordes, sombras y degradados

⏱ 40 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Componer fondos con color, imágenes y varios degradados.
Crear sombras sutiles y con profundidad.
Aplicar opacidad, filtros y efecto cristal.
Mantener el contraste y el rendimiento al usar efectos.

1.Fondos: color, imagen y capas

Propiedad	Qué hace	Valores útiles
`background-color`	Color de fondo	`#eef2ff`, `transparent`
`background-image`	Imagen o degradado	`url("foto.jpg")`, `linear-gradient(…)`
`background-size`	Tamaño de la imagen	`cover` (llena y recorta), `contain` (entera), `200px auto`
`background-position`	Dónde se coloca	`center`, `top right`, `50% 20%`
`background-repeat`	Si se repite	`no-repeat`, `repeat-x`
`background-attachment`	Comportamiento al desplazar	`fixed` (efecto parallax simple)
`background`	Atajo de todas	`url(a.jpg) center / cover no-repeat`

Imagen de fondo que cubre su caja

.hero {
  min-height: 60vh;
  background: #1e2235 url("../img/portada.jpg") center / cover no-repeat;
  color: #fff;
}

⚠️ Importante · Contraste sobre imágenes

Si pones texto sobre una foto, asegura el contraste: añade una capa oscura (linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / .5)) como primer fondo) o una sombra de texto. Una foto bonita con texto ilegible no sirve.

Un elemento puede tener varios fondos apilados, separados por comas. El primero queda encima:

✏️ Fondos en capas

Código (edítalo)

<style>
  .hero { padding: 40px 20px; color: #fff; text-align: center; font-weight: 700; font-size: 1.4rem; border-radius: 12px;
    background:
      linear-gradient(rgb(15 18 34 / .55), rgb(15 18 34 / .55)),
      linear-gradient(135deg, #4f46e5, #22d3ee 60%, #fbbf77);
  }
</style>
<div class="hero">Texto legible sobre un fondo vistoso</div>

Resultado

2.Degradados

Función	Efecto	Ejemplo
`linear-gradient()`	Cambia de color en línea recta	`linear-gradient(90deg, #4f46e5, #22d3ee)`
`radial-gradient()`	Desde un centro hacia fuera	`radial-gradient(circle at 30% 20%, #fff, #4f46e5)`
`conic-gradient()`	Gira alrededor de un centro	`conic-gradient(red, yellow, green, red)`
`repeating-linear-gradient()`	Repite el patrón	Rayas

La dirección puede ser un ángulo (45deg, 90deg) o una palabra (to right, to bottom right).
Puedes poner paradas de color con posición: #4f46e5 0%, #22d3ee 60%.
Un degradado es una imagen: va en background o background-image, no en background-color.

✏️ Galería de degradados

Código (edítalo)

<style>
  .g { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .g div { height: 90px; border-radius: 10px; }
  .a { background: linear-gradient(90deg, #4f46e5, #22d3ee); }
  .b { background: linear-gradient(135deg, #f43f5e, #fbbf24); }
  .c { background: radial-gradient(circle at 30% 30%, #fff, #4f46e5 70%); }
  .d { background: conic-gradient(from 0deg, #f43f5e, #fbbf24, #16a34a, #0ea5e9, #8b5cf6, #f43f5e); border-radius: 50% !important; }
  .e { background: repeating-linear-gradient(45deg, #4f46e5 0 10px, #eef2ff 10px 20px); }
  .f { background: linear-gradient(#fff0, #4f46e5), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%234f46e5'/%3E%3C/svg%3E"); }
</style>
<div class="g"><div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div><div class="e"></div><div class="f"></div></div>

Resultado

3.Sombras y profundidad

box-shadow

/* desplazamiento-x  desplazamiento-y  desenfoque  expansión  color */
.tarjeta { box-shadow: 0 4px 12px rgb(0 0 0 / .12); }

/* Varias sombras: más natural */
.elevada {
  box-shadow:
    0 1px 2px rgb(0 0 0 / .08),
    0 8px 24px rgb(0 0 0 / .12);
}

.hundida { box-shadow: inset 0 2px 6px rgb(0 0 0 / .25); }   /* inset: hacia dentro */
.anillo  { box-shadow: 0 0 0 3px #4f46e5; }                  /* un «borde» que no ocupa espacio */

text-shadow hace lo mismo con el texto: text-shadow: 0 1px 3px rgb(0 0 0 / .5).
filter: drop-shadow() sigue la forma real de imágenes con transparencia (PNG, SVG), cosa que box-shadow no hace.
Las sombras sutiles (poca opacidad, mucho desenfoque) se ven más profesionales que las duras.

✏️ Elevación

Código (edítalo)

<style>
  .fila { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px; background: #f1f5f9; }
  .c { width: 110px; height: 80px; background: #fff; border-radius: 12px; display: grid; place-items: center; font-size: .85rem; }
  .s1 { box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
  .s2 { box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 8px 24px rgb(0 0 0 / .12); }
  .s3 { box-shadow: 0 20px 50px rgb(0 0 0 / .25); }
  .s4 { box-shadow: inset 0 2px 8px rgb(0 0 0 / .25); }
  .s5 { box-shadow: 0 0 0 3px #4f46e5; }
</style>
<div class="fila"><div class="c s1">suave</div><div class="c s2">capas</div><div class="c s3">profunda</div><div class="c s4">inset</div><div class="c s5">anillo</div></div>

Resultado

4.Opacidad, filtros y mezcla

Propiedad	Efecto	Ejemplo
`opacity`	Transparencia de todo el elemento	`opacity: .6`
`rgb(… / %)`	Transparencia solo del color	`background: rgb(79 70 229 / 20%)`
`filter`	Efectos tipo foto	`blur(4px)`, `grayscale(1)`, `brightness(1.2)`, `contrast(1.1)`, `saturate(1.4)`
`backdrop-filter`	Efecto sobre lo que hay detrás (cristal esmerilado)	`blur(10px)`
`mix-blend-mode`	Cómo se mezcla con lo de abajo	`multiply`, `screen`, `overlay`
`clip-path`	Recorta con una forma	`circle(50%)`, `polygon(…)`

✏️ Efecto cristal y filtros

Código (edítalo)

<style>
  .fondo { position: relative; padding: 26px; border-radius: 14px; background: linear-gradient(135deg, #4f46e5, #22d3ee, #fbbf77); }
  .vidrio { padding: 16px; border-radius: 12px; color: #fff; font-weight: 700;
            background: rgb(255 255 255 / .18); backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / .35); }
  .fotos { display: flex; gap: 8px; margin-top: 12px; }
  .f { width: 70px; height: 50px; border-radius: 8px; background: linear-gradient(135deg, #f43f5e, #fbbf24); }
  .bn { filter: grayscale(1); } .bl { filter: blur(2px); } .br { filter: brightness(1.3) saturate(1.5); } .rec { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
</style>
<div class="fondo"><div class="vidrio">Cristal esmerilado</div>
  <div class="fotos"><div class="f"></div><div class="f bn"></div><div class="f bl"></div><div class="f br"></div><div class="f rec"></div></div></div>

Resultado

📌 Nota · Rendimiento

backdrop-filter y filter: blur() son costosos para el navegador, sobre todo con áreas grandes o animadas. Úsalos con moderación.

⚠️ Importante · opacity afecta a los hijos

Un opacity: .5 en un contenedor hace translúcido también a su texto y a todo lo que contiene. Si solo quieres un fondo translúcido, usa un color con alfa: background: rgb(0 0 0 / .5).

5.Texto con degradado y otros recursos

Texto con degradado

.logo {
  background: linear-gradient(90deg, #4f46e5, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

✏️ Texto con degradado

Código (edítalo)

<style>
  .logo { font: 800 2.4rem system-ui; background: linear-gradient(90deg, #4f46e5, #ec4899, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
</style>
<div class="logo">Texto con degradado</div>

Resultado

⚠️ Importante · Dar siempre una alternativa

Un texto con color: transparent desaparece si el navegador no entiende background-clip: text. Define antes un color normal y deja transparent para cuando el soporte exista, o envuélvelo en @supports (background-clip: text).

6.Buenas prácticas visuales

Menos es más: una o dos sombras y un par de degradados bastan. Cada efecto extra compite con el contenido.
Consistencia: usa las mismas sombras y radios en todo el sitio (variables en la lección 11).
Contraste primero: comprueba el texto sobre cualquier fondo, también sobre degradados (revisa la zona más clara).
Optimiza las imágenes de fondo: usa formatos modernos (WebP, AVIF) y tamaños adecuados.
Respeta las preferencias: prefers-contrast y prefers-reduced-transparency existen para quien los necesita.

7.Errores frecuentes

Poner un degradado en background-color: no funciona; va en background o background-image.
Olvidar background-size y no-repeat y que la imagen se repita o se vea enorme.
Texto ilegible sobre una foto.
opacity en vez de color con alfa y volver translúcido el texto.
Sombras muy oscuras y duras que parecen de los años 2000.
Abusar de blur y backdrop-filter y ralentizar la página.
Usar box-shadow para imágenes con transparencia (usa drop-shadow).

📒 Apuntes para llevar

background admite color, imágenes, degradados y varias capas (la primera queda encima).
background-size: cover llena la caja recortando; contain la muestra entera; añade no-repeat y center.
linear-gradient, radial-gradient y conic-gradient crean degradados: son imágenes.
box-shadow (varias capas, inset, anillos) y text-shadow dan profundidad; las sutiles se ven mejor.
opacity afecta a todo el elemento; rgb(… / %) solo al color.
filter (blur, grayscale…), backdrop-filter y clip-path aportan efectos, con coste de rendimiento.
Sobre fondos con imágenes, asegura siempre el contraste del texto.
background-clip: text crea texto con degradado, con alternativa.

8.Glosario

Término	Significado
Degradado	Imagen generada por CSS que transiciona entre colores.
`background-size`	Tamaño de la imagen de fondo (`cover`, `contain`).
Capa de fondo	Cada imagen o degradado apilado en `background`.
`box-shadow`	Sombra alrededor de la caja de un elemento.
Alfa	Canal de transparencia de un color.
`backdrop-filter`	Aplica un efecto a lo que está detrás del elemento.
`clip-path`	Recorta un elemento con una forma.
`drop-shadow`	Sombra que sigue la forma del contenido, con transparencia.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Dónde se escribe un linear-gradient()?

Quieres un fondo negro semitransparente sin afectar al texto. ¿Qué usas?

opacity volvería translúcido también el texto; un color con alfa solo afecta al fondo.

¿Qué hace background-size: cover?

cover mantiene la proporción y cubre toda la caja.

¿Cuál de estas sombras suele verse más profesional?

¿Cuál es el riesgo de abusar de backdrop-filter: blur()?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio