CSS

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

Aprende a crear gradientes lineales, radiales y cónicos con intención visual, y construye un mini generador para prototipar rápido.

¿Cuánto sabes de CSS?

📘 Teoría

Los 3 tipos clave: lineal, radial y cónico

Elige el tipo según intención visual.

`linear-gradient` funciona genial para botones, headers y overlays diagonales.

`radial-gradient` crea focos de atención y efectos de spotlight.

`conic-gradient` es ideal para anillos, indicadores de progreso y fondos dinámicos.

Comparativa rápida

.lineal { background: linear-gradient(135deg, #2563eb, #8b5cf6); }
.radial { background: radial-gradient(circle at 30% 20%, #fff7, transparent 55%), #0f172a; }
.conico { background: conic-gradient(from 180deg, #22c55e, #06b6d4, #a855f7, #22c55e); }

Color stops y contraste real

No todo gradiente bonito es usable.

Controla zonas de lectura colocando stops estratégicos para evitar texto sobre áreas conflictivas.

Cuando el texto va encima, combina gradiente + overlay oscuro para mantener accesibilidad.

Evita cambios de color abruptos detrás de texto pequeño.
Usa `rgb(r g b / a)` para ajustar opacidad sin hacks.
Prueba contraste en estado hover y focus también.

Hero legible con stops

.hero {
  color: #fff;
  background:
    linear-gradient(180deg,
      rgb(2 6 23 / .78) 0%,
      rgb(2 6 23 / .55) 35%,
      rgb(2 6 23 / .22) 100%),
    url('https://images.unsplash.com/photo-1516116216624-53e697fedbea?auto=format&fit=crop&w=1200&q=80') center / cover no-repeat;
}

Repeating gradients para patrones

Patrones ligeros, sin descargas extra.

`repeating-linear-gradient` te permite rayas y texturas técnicas muy útiles para dashboards.

`repeating-radial-gradient` funciona genial para dots y tramas decorativas.

Rayas diagonales

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #0f172a 0 12px,
    #1e293b 12px 24px
  );
}

1 Los 3 tipos clave: lineal, radial y cónico 2 Color stops y contraste real 3 Repeating gradients para patrones

🧭 Visuales clave

Tipos de degradado y uso recomendado

Ayuda a elegir el tipo de degradado según intención visual y legibilidad.

Comparativa visual entre degradados lineal, radial y cúnico con criterios de uso.

🧪 Aprende probando

Ejemplo Demo interactiva: generador de gradientes Cambia ángulo y colores; copia el CSS final para usarlo en tus componentes.

⌄

Ejemplo Demo interactiva: generador de hero con degradados Ajusta glow, overlay y ángulo para construir fondos de hero más ricos sin perder legibilidad.

⌄

🏁 Retos

Reto Reto: gradiente de marca reutilizable Crea una clase `.brand-gradient` con buen contraste para CTA.

⌄

🧰 Recursos

Enlaces útiles

MDN: linear-gradient() MDN: conic-gradient() MDN: radial-gradient()

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 16

OKLCH: El futuro de la gestión del color

Lección 18

Backgrounds avanzados: capas, clip y composición real

›