Gradiente Winter Rosewater

Um gradiente CSS linear de 4 cores, de #F69AFD a #8ECBFF, interpolado em OKLCH para que o meio continue vivo.

Arco-írisRoxos

Paradas

HEXRGBOKLCHPosição
#F69AFD rgb(246, 154, 253) oklch(81.3% 0.166 324.4) 0%
#E88E40 rgb(232, 142, 64) oklch(72.7% 0.142 58.3) 33%
#6CDC8E rgb(108, 220, 142) oklch(80.9% 0.151 151.5) 67%
#8ECBFF rgb(142, 203, 255) oklch(82% 0.097 245.1) 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(120deg, #F69AFD, #E88E40, #6CDC8E, #8ECBFF);
background: linear-gradient(120deg in oklch, #F69AFD, #E88E40, #6CDC8E, #8ECBFF);

Tailwind CSS v4

bg-linear-[120deg_in_oklch,#F69AFD,#E88E40,#6CDC8E,#8ECBFF]

Faça dela a sua

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