Dégradé Little Blueprint

Un dégradé CSS linéaire de 3 couleurs, de #3993C7 à #EAC8FF, interpolé en OKLCH pour que le milieu reste vif.

PastelFroidsBleusViolets

Étapes

HEXRGBOKLCHPosition
#3993C7 rgb(57, 147, 199) oklch(63.3% 0.115 238) 0%
#F4F6FF rgb(244, 246, 255) oklch(97.4% 0.012 276.1) 50%
#EAC8FF rgb(234, 200, 255) oklch(87.9% 0.083 312.4) 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(0deg, #3993C7, #F4F6FF, #EAC8FF);
background: linear-gradient(0deg in oklch, #3993C7, #F4F6FF, #EAC8FF);

Tailwind CSS v4

bg-linear-0/oklch from-[#3993C7] via-[#F4F6FF] to-[#EAC8FF]

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.