Transición de degradados en CSS

Por mucho tiempo esto fue imposible, pero hoy te enseñaré como lograrlo con custom properties

Transición de degradados en CSS

Hacer un degradado en CSS puede ser tan simple como hacer esto:

.hero {
  background: linear-gradient(to right, #0ee9ef, #edbf65);
}

Cambiar este degrado en alguna interacción como por ejemplo un hover es posible pero lo que NO ES POSIBLE es que sea de una forma suave gracias a una transición

.hero {
  transition: 1s background;
  background: linear-gradient(to right, #0ee9ef, #edbf65);
}
.hero:hover {
  background: linear-gradient(to right, #edbf65, #0ee9ef);
}

Aquí entra CSS Houdini o más en detalle la evolución de los Custom Properties mas conocidas como las variables en CSS, pero necesitábamos de JavaScript para lograrlo, hice un video sobre esto.

Peeeero, ahora esta misma capacidad de crear nuestros propios custom properties ha llegado en forma de regla a CSS:

@property --gradient-start {
  syntax: "<color>";
  initial-value: transparent;
  inherits: false;
}

@property es esta nueva regla donde podremos crear un custom property y preparar al navegador para saber como interpretar el valor que contendrá gracias a syntax que en este caso es un <color> también podemos asignar un valor por defecto transparente y si la propiedad tendrá la capacidad de ser heredada.

Aquí lo maravilloso es que el navegador sabrá de forma explicita que --gradient-start contendrá un color y de esa forma crear una transición <3.

Sabiendo esto podremos crear 2 custom properties con estas características y ver los resultados:

@property --gradient-start {
  syntax: "<color>";
  initial-value: transparent;
  inherits: false;
}

@property --gradient-end {
  syntax: "<color>";
  initial-value: transparent;
  inherits: false;
}

.hero {
  --gradient-start: #0ee9ef;
  --gradient-end: #edbf65;
  height: 100vh;
  width: 100vw;
  transition: 1s --gradient-start, 1s --gradient-end;
  background: linear-gradient(
    to right,
    var(--gradient-start),
    var(--gradient-end)
  );
}

.hero:hover {
  --gradient-start: #edbf65;
  --gradient-end: #0ee9ef;
}

Estamos realmente traicionando los colores en vez de del background completo porque en este caso guardamos una transición que para el navegador es interpretado como una imagen, la propiedad exacta a usar si queremos almacenar solo un degrado sería background-image pero background nos da la versatilidad de agregar multiples tipos combinando fondos de color puro o de imagen como en este caso.

En el canal hicimos degradados obteniendo los colores predominantes de cada Pokemon donde esta característica fue clave del éxito, te invito a ver la serie de CSS Houdini.