Dégradé Lit Raspberry

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

VibrantsArc-en-cielRoses

Étapes

HEXRGBOKLCHPosition
#00CBF2 rgb(0, 203, 242) oklch(77.8% 0.14 218.3) 0%
#9F8CFC rgb(159, 140, 252) oklch(70.5% 0.16 289.4) 33%
#FE74A4 rgb(254, 116, 164) oklch(73.6% 0.174 0.4) 67%
#EBA02F rgb(235, 160, 47) oklch(76.2% 0.149 72) 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(315deg, #00CBF2, #9F8CFC, #FE74A4, #EBA02F);
background: linear-gradient(315deg in oklch, #00CBF2, #9F8CFC, #FE74A4, #EBA02F);

Tailwind CSS v4

bg-linear-[315deg_in_oklch,#00CBF2,#9F8CFC,#FE74A4,#EBA02F]

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.