CSS

Backgrounds avanzados: capas, clip y composición real

Domina `background` con shorthand moderno, múltiples capas y patrones profesionales de UI sin depender de imágenes pesadas.

¿Cuánto sabes de CSS?

📘 Teoría

Shorthand moderno y orden de capas

Piensa en capas como Photoshop, pero en CSS.

La sintaxis clave es `position / size` dentro del shorthand. Ejemplo: `center / cover no-repeat`.

En múltiples fondos, la primera capa queda arriba. Eso te permite meter un gradiente overlay encima de una foto y mejorar contraste sin editar assets.

Primera capa: arriba.
Última capa: ideal como color fallback.
`position / size` van juntas para evitar ambigüedad.

Overlay + imagen + fallback

.hero {
  background:
    linear-gradient(180deg, rgb(2 6 23 / .72), rgb(2 6 23 / .28)),
    url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1400&q=80') center / cover no-repeat,
    #0f172a;
  color: #fff;
}

Patrones con gradientes y repeating

Menos requests, más control.

Con `repeating-linear-gradient` y `repeating-radial-gradient` puedes crear rayas, puntos y rejillas sin imágenes.

Esto es útil para dashboards, skeletons y fondos técnicos ligeros.

Rejilla con dos capas

.grid-bg {
  background:
    linear-gradient(rgb(148 163 184 / .2) 1px, transparent 1px),
    linear-gradient(90deg, rgb(148 163 184 / .2) 1px, transparent 1px),
    #0b1220;
  background-size: 24px 24px;
  background-position: -1px -1px;
  color: #e2e8f0;
}

background-clip/origin para bordes de nivel pro

Efecto de borde degradado sin pseudo-elementos.

Un patrón muy útil: dos backgrounds, uno para el relleno y otro para el borde.

Con `padding-box` y `border-box` controlas dónde se pinta cada capa.

Badge con borde degradado

.badge {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(90deg, #22c55e, #06b6d4, #a855f7) border-box;
  color: #e2e8f0;
  padding: 10px 16px;
  display: inline-block;
}

image-set y fallback robusto

Sirve imágenes según densidad sin duplicar CSS.

`image-set()` te deja declarar variantes 1x/2x para mejorar nitidez en pantallas retina.

Acompáñalo siempre con color de fallback para evitar flashes feos mientras carga.

Usa `image-set` cuando el fondo principal sea clave visual.
Combínalo con `background-color` para estado de carga agradable.
Evita abusar de pesos altos en móviles.

Declaración base con image-set

.hero-retina {
  background-color: #111827;
  background-image: image-set(
    url('/img/hero@1x.webp') 1x,
    url('/img/hero@2x.webp') 2x
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

1 Shorthand moderno y orden de capas 2 Patrones con gradientes y repeating 3 background-clip/origin para bordes de nivel pro 4 image-set y fallback robusto

🧭 Visuales clave

Capas de backgrounds y orden de pintura

Muestra cómo se compone un fondo profesional en CSS y por qué la primera capa queda arriba.

Diagrama de capas CSS con overlay, imagen y color fallback en orden de renderizado.

🧪 Aprende probando

Ejemplo Demo guiada: hero multicapa Ajusta overlay, posición y tamaño para mantener legibilidad en cualquier foto.

⌄

Ejemplo Demo interactiva: recortes visuales con CSS mask Prueba máscaras radiales, spotlight, franjas, fade y texto para entender cómo recortar una composición sin editar la imagen base.

⌄

🏁 Retos

Reto Reto: tarjeta con textura + gradiente + fallback Compón tres capas y consigue contraste correcto para texto claro.

⌄

🧰 Recursos

Enlaces útiles

MDN: background MDN: background-clip MDN: background-size MDN: image-set()

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

Recursos del curso 78

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 17

Degradados en CSS: diseño avanzado y generador práctico

Lección 19

CSS Mask: recortes, fades y texto sin editar imágenes

›