{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Generador de paletas y degradados CSS

Crea combinaciones de color útiles para UI y genera gradientes listos para usar en fondos, botones y tarjetas.

Una utilidad de color debe priorizar legibilidad y consistencia visual, no solo combinaciones llamativas.

Si generas tokens de color y degradado, puedes reutilizarlos en todo el proyecto sin duplicar decisiones.

Este generador conecta teoría de color CSS con producción real de interfaces.

  • Define variables para primario, secundario, fondo y contraste.
  • Empieza por un color base y deriva variaciones con HSL para mantener armonía.
  • Asegura contraste suficiente entre texto y fondo antes de exportar la paleta.
  • Mantén la utilidad enfocada: edición rápida, preview real y código copiable.
  • Token recomendado: --color-primary, --color-secondary, --gradient-main.

Diseña con tokens, no con valores sueltos

Define variables para primario, secundario, fondo y contraste.

Empieza por un color base y deriva variaciones con HSL para mantener armonía.

Asegura contraste suficiente entre texto y fondo antes de exportar la paleta.

Mantén la utilidad enfocada: edición rápida, preview real y código copiable.

  • Token recomendado: --color-primary, --color-secondary, --gradient-main.
  • Ángulo del degradado y saturación son los controles más útiles en fases tempranas.
  • Evita más de 5 colores base por paleta para no perder coherencia.

Exportación a CSS reutilizable

La utilidad debe producir código directo para tu design system.

CSS
20

Generador de paletas y degradados CSS

Crea combinaciones de color útiles para UI y genera gradientes listos para usar en fondos, botones y tarjetas.

¿Cuánto sabes de CSS?

Código del tema: background: linear-gradient(135deg, #0ea5e9, #22c55e);

📘 Teoría

Diseña con tokens, no con valores sueltos

Define variables para primario, secundario, fondo y contraste.

Empieza por un color base y deriva variaciones con HSL para mantener armonía.

Asegura contraste suficiente entre texto y fondo antes de exportar la paleta.

Mantén la utilidad enfocada: edición rápida, preview real y código copiable.

  • Token recomendado: --color-primary, --color-secondary, --gradient-main.
  • Ángulo del degradado y saturación son los controles más útiles en fases tempranas.
  • Evita más de 5 colores base por paleta para no perder coherencia.

Exportación a CSS reutilizable

La utilidad debe producir código directo para tu design system.

Bloque de salida recomendado
:root {
  --color-primary: #2563eb;
  --color-secondary: #7c3aed;
  --gradient-main: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.hero {
  background: var(--gradient-main);
}

🧪 Aprende probando

Ejemplo Demo: generador visual de paleta + gradiente Explora una paleta responsive con variaciones, armonías y exportación CSS lista para usar.
⌄

🏁 Retos

Reto Reto: exportar tokens de color Crea variables CSS y aplica el gradiente principal en una cabecera.
⌄

🧰 Recursos

Enlaces útiles

MDN - linear-gradient() MDN - color Coolors CSS 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 19
CSS Mask: recortes, fades y texto sin editar imágenes
Lección 21
Tipografía en CSS: sistema, legibilidad y rendimiento
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .