Guia Completa de Gradientes CSS

Los gradientes son uno de los efectos CSS mas utilizados en el diseno web moderno. Instagram, Stripe, Spotify... todos expresan su identidad de marca con gradientes.

En esta guia, exploraremos todos los tipos de gradientes CSS y aplicaciones practicas con ejemplos de codigo.

---

Entendiendo los Conceptos Basicos de Gradientes

Tipos de Gradientes

Sintaxis Basica

.element {
  background: linear-gradient(direction, color1, color2, ...);
}

---

Linear Gradient: Gradiente Lineal

Configuracion de Direccion

/* Direccion por palabra clave */
.to-right { background: linear-gradient(to right, #6366f1, #8b5cf6); }
.to-bottom { background: linear-gradient(to bottom, #6366f1, #8b5cf6); }
.to-top-right { background: linear-gradient(to top right, #6366f1, #8b5cf6); }

/* Direccion por angulo */
.angle-45 { background: linear-gradient(45deg, #6366f1, #8b5cf6); }
.angle-90 { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.angle-180 { background: linear-gradient(180deg, #6366f1, #8b5cf6); }

Resumen de Palabras Clave de Direccion

Paradas de Color

/* Distribucion igual (automatico) */
.auto {
  background: linear-gradient(#ff0000, #00ff00, #0000ff);
  /* 0%, 50%, 100% */
}

/* Posiciones explicitas */
.explicit {
  background: linear-gradient(
    #ff0000 0%,
    #ff0000 30%,    /* 0-30%: Mantener rojo */
    #00ff00 30%,    /* Transicion abrupta en 30% */
    #00ff00 70%,    /* 30-70%: Mantener verde */
    #0000ff 70%     /* Transicion abrupta en 70% */
  );
}

/* Parada dura (transicion abrupta) */
.hard-stop {
  background: linear-gradient(
    #6366f1 50%,
    #8b5cf6 50%
  );
}

Ejemplo Practico: Gradientes de Tendencia

/* Estilo Instagram */
.instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

/* Estilo Stripe */
.stripe {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
}

/* Fondo glassmorphism */
.glassmorphism {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
}

---

Radial Gradient: Gradiente Radial

Sintaxis Basica

.radial {
  background: radial-gradient(shape size at position, color1, color2, ...);
}

Forma

/* Circulo */
.circle {
  background: radial-gradient(circle, #6366f1, #8b5cf6);
}

/* Elipse (por defecto) */
.ellipse {
  background: radial-gradient(ellipse, #6366f1, #8b5cf6);
}

Tamano

.size-demo {
  background: radial-gradient(circle closest-side at 30% 30%, #6366f1, #8b5cf6);
}

Posicion

/* Posicion por palabra clave */
.top-left {
  background: radial-gradient(circle at top left, #6366f1, #8b5cf6);
}

/* Posicion por porcentaje */
.percent {
  background: radial-gradient(circle at 30% 70%, #6366f1, #8b5cf6);
}

/* Posicion por pixel */
.pixel {
  background: radial-gradient(circle at 100px 50px, #6366f1, #8b5cf6);
}

Ejemplo Practico: Efecto Spotlight

.spotlight {
  background:
    radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(99, 102, 241, 0.3) 0%,
      transparent 50%
    ),
    #1a1a2e;
}

// Spotlight siguiendo el mouse
document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  document.documentElement.style.setProperty('--mouse-x', `${x}%`);
  document.documentElement.style.setProperty('--mouse-y', `${y}%`);
});

---

Conic Gradient: Gradiente Conico

Sintaxis Basica

.conic {
  background: conic-gradient(from angle at position, color1, color2, ...);
}

Ejemplos Basicos

/* Rueda de colores */
.color-wheel {
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
  border-radius: 50%;
}

/* Grafico de pastel */
.pie-chart {
  background: conic-gradient(
    #6366f1 0deg 90deg,      /* 25% */
    #8b5cf6 90deg 180deg,    /* 25% */
    #a78bfa 180deg 270deg,   /* 25% */
    #c4b5fd 270deg 360deg    /* 25% */
  );
  border-radius: 50%;
}

Angulo de Inicio y Posicion

/* Cambiar angulo de inicio */
.from-angle {
  background: conic-gradient(
    from 45deg,
    #6366f1, #8b5cf6
  );
}

/* Cambiar posicion del centro */
.at-position {
  background: conic-gradient(
    at 30% 70%,
    #6366f1, #8b5cf6
  );
}

Ejemplo Practico: Grafico de Dona

.donut-chart {
  background: conic-gradient(
    #6366f1 0deg 120deg,
    #8b5cf6 120deg 240deg,
    #a78bfa 240deg 360deg
  );
  border-radius: 50%;
  position: relative;
}

.donut-chart::after {
  content: '';
  position: absolute;
  inset: 25%;
  background: white;
  border-radius: 50%;
}

---

Repeating Gradients: Patrones Repetitivos

Lineal Repetitivo

/* Patron de rayas */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1,
    #6366f1 10px,
    #8b5cf6 10px,
    #8b5cf6 20px
  );
}

/* Cinta de advertencia */
.warning-tape {
  background: repeating-linear-gradient(
    45deg,
    #fbbf24,
    #fbbf24 20px,
    #1f2937 20px,
    #1f2937 40px
  );
}

Radial Repetitivo

/* Patron de ondas */
.ripple {
  background: repeating-radial-gradient(
    circle at center,
    #6366f1 0px,
    #6366f1 5px,
    transparent 5px,
    transparent 20px
  );
}

Conico Repetitivo

/* Patron de abanico */
.fan {
  background: repeating-conic-gradient(
    #6366f1 0deg 10deg,
    #8b5cf6 10deg 20deg
  );
}

---

Multiples Capas de Gradiente

Apilar Capas

.layered {
  background:
    linear-gradient(45deg, rgba(99, 102, 241, 0.5), transparent 50%),
    linear-gradient(-45deg, rgba(139, 92, 246, 0.5), transparent 50%),
    linear-gradient(to bottom, #1a1a2e, #16213e);
}

Gradiente + Imagen

.overlay {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.8)
    ),
    url('/image.jpg') center/cover;
}

Ejemplo Practico: Efecto Gradiente Mesh

.mesh-gradient {
  background:
    radial-gradient(at 40% 20%, #6366f1 0px, transparent 50%),
    radial-gradient(at 80% 0%, #8b5cf6 0px, transparent 50%),
    radial-gradient(at 0% 50%, #a78bfa 0px, transparent 50%),
    radial-gradient(at 80% 50%, #c4b5fd 0px, transparent 50%),
    radial-gradient(at 0% 100%, #e9d5ff 0px, transparent 50%),
    radial-gradient(at 80% 100%, #fae8ff 0px, transparent 50%),
    #1e1b4b;
}

---

Gradientes Animados

Animacion de Posicion

.animated-gradient {
  background: linear-gradient(
    270deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #c4b5fd
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Animacion Hue Rotate

.hue-rotate {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  animation: hue-rotate 5s linear infinite;
}

@keyframes hue-rotate {
  to { filter: hue-rotate(360deg); }
}

Transicion de Color Suave con @property

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.smooth-rotate {
  --gradient-angle: 0deg;
  background: conic-gradient(
    from var(--gradient-angle),
    #6366f1, #8b5cf6, #6366f1
  );
  animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

---

Texto con Gradiente

Implementacion Basica

.gradient-text {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Texto Animado

.animated-text {
  background: linear-gradient(
    90deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #6366f1
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shine 3s linear infinite;
}

@keyframes text-shine {
  to { background-position: 300% 0; }
}

---

Borde con Gradiente

Metodo clip-path

.gradient-border {
  position: relative;
  background: white;
  padding: 2rem;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: inherit;
}

Metodo border-image

.gradient-border-simple {
  border: 3px solid;
  border-image: linear-gradient(45deg, #6366f1, #8b5cf6) 1;
}

---

Optimizacion de Rendimiento

Utilizando Aceleracion GPU

/* Animar con transform */
.optimized {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  transform: translateZ(0); /* Crear capa GPU */
}

Alternativa para Gradientes Complejos

/* Considerar usar imagenes en lugar de muchas capas */
.complex {
  background: url('/gradient.webp') center/cover;
}

---

FAQ

Q1: Elegir colores de gradiente es dificil. ¿Alguna combinacion recomendada?

A: Revisa los presets de gradiente populares en Gradient Generator. Ademas, comenzar con familias de colores similares (purpura-azul, naranja-rosa) se ve natural.

Q2: ¿Funcionan los gradientes en IE?

A: IE11 soporta linear-gradient y radial-gradient, pero no conic-gradient. A partir de 2026, el soporte de IE ha terminado en gran medida.

Q3: ¿Los gradientes afectan el tamano del bundle?

A: Los gradientes CSS son mucho mas ligeros que las imagenes. Incluso gradientes complejos se expresan en solo unas pocas lineas de CSS, con impacto minimo en el tamano del bundle.

Q4: ¿Como configuro la transparencia del gradiente?

A: Usa rgba() o hsla().

background: linear-gradient(rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));

Q5: Mi animacion de gradiente tiene tirones.

A: En lugar de animacion background-position, animar variables CSS con @property es mas suave. O usa filter: hue-rotate().

---

Conclusion

Puntos Clave de Gradientes CSS:

1. Lineal: Direccion + paradas de color
2. Radial: Forma + tamano + posicion
3. Conico: Angulo de rotacion + posicion
4. Multiples capas: Separadas por comas, apiladas de arriba a abajo
5. Animacion: background-position o @property

---

Herramientas Relacionadas