Gradiente Lazy Iris

Um gradiente CSS linear de 3 cores, de #E886D2 a #005EA9, interpolado em OKLCH para que o meio continue vivo.

FriosAzuisRosas

Paradas

HEXRGBOKLCHPosição
#E886D2 rgb(232, 134, 210) oklch(74.9% 0.151 335.9) 0%
#C3B3FF rgb(195, 179, 255) oklch(80.7% 0.107 293.5) 50%
#005EA9 rgb(0, 94, 169) oklch(47.8% 0.141 251.5) 100%

CSS

A primeira declaração é um gradiente sRGB simples, que funciona em qualquer navegador. A segunda interpola em OKLCH, o que mantém o meio tão vivo quanto as pontas.

background: linear-gradient(45deg, #E886D2, #C3B3FF, #005EA9);
background: linear-gradient(45deg in oklch, #E886D2, #C3B3FF, #005EA9);

Tailwind CSS v4

bg-linear-45/oklch from-[#E886D2] via-[#C3B3FF] to-[#005EA9]

Faça dela a sua

Mude as paradas, o ângulo e o tipo no Criador de gradientes, ou transforme as paradas em uma paleta.