Gradientes

Gradientes por capas para profundidad y claridad

Equilibra contraste, posiciones de los stops y acentos radiales sutiles.

Checklist

Checklist de gradientes

Tres pasos para un gradiente limpio

  • Elige 2–3 tonos y separa bien los stops para evitar mezclas sucias.
  • Añade un brillo radial para guiar la vista.
  • Mantén el contraste del texto con overlays o una base sólida.

Demo

Mezcla por capas

Base lineal + brillo radial

background:
  radial-gradient(circle at 30% 20%, rgba(255,255,255,0.16), transparent 45%),
  linear-gradient(135deg, #7c3aed, #6ee7ff);

Patrones

Casos de uso

Fondos hero, tarjetas CTA y avatares

Header de cristal

Gradiente + blur + borde suave

background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.12);

Acento cónico

Barrido fino para labels

background: conic-gradient(from 120deg, #6dd3ff, #ff7ce6, #6dd3ff);
mask: linear-gradient(90deg, transparent 0, black 25%, black 75%, transparent 100%);