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.

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.

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.

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

›