Dégradé Winter Rosewater

Un dégradé CSS linéaire de 4 couleurs, de #F69AFD à #8ECBFF, interpolé en OKLCH pour que le milieu reste vif.

Arc-en-cielViolets

Étapes

HEXRGBOKLCHPosition
#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

La première déclaration est un dégradé sRGB simple, pour tous les navigateurs. La seconde interpole en OKLCH, ce qui garde le milieu aussi vif que les extrémités.

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]

Faites-la vôtre

Modifiez les étapes, l’angle et le type dans le Créateur de dégradés, ou transformez les étapes en palette.