CSS-kleurverloop generator

Zo gebruik je de CSS-kleurverloop generator

1. Kies een Soort verloop: Lineair, Radiaal of Conisch. Het grote voorbeeld bovenaan wordt bij elke wijziging bijgewerkt.
2. Stel bij een lineair verloop de Hoek in met de schuifregelaar of typ hem in graden (90° loopt van links naar rechts, 180° van boven naar beneden). Bij een conisch verloop is de hoek het punt waar de draai begint.
3. Verplaats bij radiale en conische verlopen het middelpunt met Middelpunt X en Middelpunt Y. Een radiaal verloop kan een Cirkel of een Ellips zijn (het menu Vorm).
4. Bewerk de Kleurstops. Klik ergens op de balk om daar een stop toe te voegen met de kleur die het verloop op dat punt al heeft, of gebruik Stop toevoegen om het grootste gat te vullen. Sleep een greep om hem te verplaatsen. Elke stop heeft ook een rij waarin je de kleur kiest, een willekeurige CSS-kleur typt, de Positie (%) instelt of hem Verwijderen kunt (een verloop houdt minstens twee stops).
5. Vink eventueel Herhalend aan, kies de Kleurinterpolatie, klik op Omkeren om de stops om te draaien of op Willekeurig verloop voor inspiratie.
6. Kopieer het resultaat uit CSS-code met Kopiëren.

Toetsenbord: geef een greep op de balk de focus en verplaats hem met de pijltjestoetsen per 1% (10% met Shift), spring met Home en End naar de uiteinden en verwijder hem met Delete.

De drie verloopfuncties

• linear-gradient() laat kleuren langs een rechte lijn in elkaar overlopen. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) loopt van indigo links naar roze rechts. Hoeken lopen met de klok mee vanaf boven: 0deg wijst omhoog, 90deg naar rechts.
• radial-gradient() straalt uit vanuit een middelpunt. radial-gradient(circle at 30% 40%, …) plaatst het middelpunt op 30% van links en 40% van boven. Een ellips rekt mee met het kader, een cirkel blijft rond.
• conic-gradient() draait rond een middelpunt zoals de wijzers van een klok. Met conic-gradient(from 0deg at 50% 50%, …) maak je kleurenwielen, cirkeldiagrammen en spinnereffecten. De posities van de stops zijn delen van een volle draai.

De optie Herhalend gebruikt repeating-linear-gradient() en verwante functies: het patroon van je stops herhaalt zich tot het kader gevuld is. Zet de laatste stop ruim onder 100% (bijvoorbeeld 20%) om strepen of ringen te zien.

Twee stops op dezelfde positie geven een harde overgang in plaats van een verloop; zo maak je strepen en vlaggen. De generator houdt de stops in de code op volgorde van positie, zoals CSS vereist.

Interpolatie in sRGB of OKLCH

Standaard mengen browsers de kleuren van een verloop in sRGB. Tussen twee verzadigde kleuren, zoals blauw en geel, ontstaat dan vaak een dof grijs of modderig midden. Met CSS Color Level 4 kies je de interpolatieruimte: linear-gradient(90deg in oklch, …) mengt in de perceptuele OKLCH-ruimte en houdt het midden levendig.

Met OKLCH (vloeiender, met sRGB-terugval) schrijft de tool twee background-declaraties: eerst de klassieke sRGB-versie, dan de OKLCH-versie. Browsers die interpolatieruimtes ondersteunen (Chrome en Edge 111+, Safari 16.2+, Firefox 127+) gebruiken de tweede regel; oudere negeren die en houden de eerste.

Tips

• Kleuren met transparantie worden in de stopvelden geaccepteerd, bijvoorbeeld #00000080 of rgb(0 0 0 / 50%). Handig voor overlays op afbeeldingen.
• De code wordt geschreven met background. Gebruik background-image als je andere achtergrondeigenschappen apart instelt.
• Subtiele verlopen (twee nauw verwante tinten van één kleur) zien er meestal professioneler uit dan regenboogverlopen.