Dégradé Hazy Citrine

Un dégradé CSS linéaire de 4 couleurs, de #00BBD1 à #A3CA61, interpolé en OKLCH pour que le milieu reste vif.

Arc-en-cielRouges

Étapes

HEXRGBOKLCHPosition
#00BBD1 rgb(0, 187, 209) oklch(72.5% 0.125 209.6) 0%
#C7A1FF rgb(199, 161, 255) oklch(77.8% 0.136 301.9) 33%
#FB876C rgb(251, 135, 108) oklch(74.6% 0.147 34.2) 67%
#A3CA61 rgb(163, 202, 97) oklch(78.8% 0.14 126.3) 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(200deg, #00BBD1, #C7A1FF, #FB876C, #A3CA61);
background: linear-gradient(200deg in oklch, #00BBD1, #C7A1FF, #FB876C, #A3CA61);

Tailwind CSS v4

bg-linear-[200deg_in_oklch,#00BBD1,#C7A1FF,#FB876C,#A3CA61]

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.