Gradiëntmaker

OKLCH perceptueel uniforme gradiënten, geen grijze band, éénkliks CSS-export.

Profiel →Positie0%

Profiel →Positie100%

Hoek90°Vloeiende interpolatie (geen dode zone)

Verlooppbibliotheek

48 klassieke combinaties van de gemeenschap — klik om stops, type en hoek in één keer toe te passen.

Zonsondergang

Oceaan

Bos

Snoep

Schemering

Gedempt

CSS-code

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

Hoe de verloopgereedschap werkt – stops bouwen, afstemmen, CSS kopiëren.

2-6 stops met vrije positionering, OKLCH-interpolatie zonder modderige banden, plus 48 samengestelde voorinstellingen.

01
Stops bouwen
2-6 stops: kies elke kleur, sleep posities of plak HEX-waarden.
02
Afstemmen
Schakel tussen lineair/radiaal/conisch, sleep de hoek – of pas een samengestelde voorinstelling met één klik toe.
03
Kopiëren
De vloeiende modus breidt OKLCH-middenpunten automatisch uit; CSS is direct klaar om te plakken en de link bevat uw verloop.

Veelgestelde vragen over verlopen

Vier vragen die gebruikers daadwerkelijk stellen.

Waarom worden verlopen grijs in het midden?: RGB-interpolatie gaat door gebied met lage verzadiging. OKLCH-interpolatie volgt de tint, zodat het midden schoon blijft.
Kan ik meer stops toevoegen?: Ja – 2 tot 6 stops, elk met zijn eigen kleur en positie. De vloeiende modus voegt OKLCH-middenpunten toe tussen buren, zodat de hele verloop schoon blijft.
Welke browsers ondersteunen de geëxporteerde CSS?: Alle moderne browsers. De tool levert platte RGB-stops op, dus er is geen conversie nodig, zelfs voor oudere engines.
Hoe deel ik een verloop?: Elke aanpassing wordt gesynchroniseerd in de pagina-URL (#g=...). Stuur de adresbalklink naar een collega en deze opent precies zoals jij het hebt ingesteld.

Na het behalen van het resultaat

Ga verder vanaf hier en breng de kleuren in praktijk.

Tintengenerator

Iedere kleur omzetten naar een 11-traps schaal voor ontwerpsystemen, perceptueel gelijkmatig in OKLCH, WCAG-kleurcontrast per stap, exporteren naar Tailwind/CSS/SCSS/JSON.

Kleurconverter

Typ elk formaat (HEX / RGB / HSL / naam) en converteer in realtime naar alle kleurruimten.

Paletbord

Spatiebalk om te randomiseren, vergrendelen, slepen om opnieuw te ordenen, delen via URL — alles wat een paletbord zou moeten doen.

Contrastcontroleur

WCAG 2.1 contrastvalidatie tussen elke voorgrond- en achtergrondkleur.

Hoe de verloopgereedschap werkt – stops bouwen, afstemmen, CSS kopiëren.

2-6 stops met vrije positionering, OKLCH-interpolatie zonder modderige banden, plus 48 samengestelde voorinstellingen.

Stops bouwen

2-6 stops: kies elke kleur, sleep posities of plak HEX-waarden.

Afstemmen

Schakel tussen lineair/radiaal/conisch, sleep de hoek – of pas een samengestelde voorinstelling met één klik toe.

Kopiëren

De vloeiende modus breidt OKLCH-middenpunten automatisch uit; CSS is direct klaar om te plakken en de link bevat uw verloop.

Veelgestelde vragen over verlopen

Vier vragen die gebruikers daadwerkelijk stellen.

Waarom worden verlopen grijs in het midden?

RGB-interpolatie gaat door gebied met lage verzadiging. OKLCH-interpolatie volgt de tint, zodat het midden schoon blijft.

Kan ik meer stops toevoegen?

Ja – 2 tot 6 stops, elk met zijn eigen kleur en positie. De vloeiende modus voegt OKLCH-middenpunten toe tussen buren, zodat de hele verloop schoon blijft.

Welke browsers ondersteunen de geëxporteerde CSS?

Alle moderne browsers. De tool levert platte RGB-stops op, dus er is geen conversie nodig, zelfs voor oudere engines.

Hoe deel ik een verloop?

Elke aanpassing wordt gesynchroniseerd in de pagina-URL (#g=...). Stuur de adresbalklink naar een collega en deze opent precies zoals jij het hebt ingesteld.