CSS-kleurverloopgenerator

Maak lineaire, radiale en conische CSS-kleurverlopen met OKLCH- of OKLab-menging en sRGB-fallback, kopieer CSS, Tailwind of SVG, of download een PNG.

Draait volledig in je browser - je kleurverlopen worden nergens naartoe geüpload.

Kleurstops

Klik op de balk om een stop toe te voegen en sleep een stop om hem te verplaatsen. Is er een stop geselecteerd, dan verplaatsen de pijltjestoetsen hem en verwijdert Delete hem.

KleurHexPositie (%)

Type

Hoek (°)

Herhalen

Voorinstellingen

Kleuren mengen in

Dezelfde stops, op drie manieren gemengd. Klassiek sRGB kan tussen ver uiteenliggende kleuren grauw of modderig worden; OKLab houdt de helderheid gelijkmatig en OKLCH houdt de kleur krachtig. Browsers die OKLab of OKLCH niet kennen, krijgen een sRGB-fallback die er hetzelfde uitziet.

Tekst erop

Witte tekst: 2,1:1; Te laag
Zwarte tekst: 4,2:1; AA alleen grote tekst

Het laagste contrast op welke plek dan ook in het verloop. WCAG AA vraagt 4,5:1 voor lopende tekst en 3:1 voor grote tekst.

Code

Formaat

background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);

Afbeeldingsformaat

Stel op het oog een CSS-kleurverloop samen en kopieer code die overal werkt. Kies lineair, radiaal of conisch, sleep de kleurstops en bepaal hoe de kleuren mengen: moderne browsers kunnen mengen in OKLab of OKLCH, wat de grauwe dode zone van klassieke sRGB-verlopen voorkomt, en de code bevat een bijpassende sRGB-fallback voor oudere browsers. Je ziet ook of witte of zwarte tekst erop leesbaar blijft, en je kunt een Tailwind-class, een SVG of een PNG in elk gewenst formaat exporteren.

Veelgestelde vragen

Wat is het verschil tussen sRGB-, OKLab- en OKLCH-verlopen?

Het zijn verschillende manieren om de kleuren tussen twee stops te berekenen. Klassieke CSS-verlopen mengen in sRGB, wat kan wegzakken in grijs (van blauw naar geel loopt via een dof grijs) of in het midden donkerder kan worden. OKLab is zo ontworpen dat gelijke stappen er ook gelijk uitzien, zodat de menging gelijkmatig helder blijft. OKLCH mengt lichtheid, kleursterkte en tint apart, gaat dus rond over de kleurencirkel en blijft levendig - van rood naar blauw loopt via paars in plaats van een donker mauve. Schrijf “in oklab” of “in oklch” in het verloop om ze te gebruiken.

Werkt het OKLCH-verloop in elke browser?

Chrome en Edge 111+, Safari 16.2+ en Firefox 127+ begrijpen “in oklch” en “in oklab”. Voor oudere browsers heeft de code twee “background”-regels: de eerste is een gewoon sRGB-verloop met extra tussenstops, zodat het er bijna hetzelfde uitziet, en de tweede is de moderne. Browsers slaan de regel over die ze niet begrijpen, zodat iedereen de beste versie krijgt die zijn browser kan tekenen.

Hoe gebruik ik het met Tailwind CSS?

Kies “Tailwind-class” en kopieer hem: het is een arbitrary value zoals bg-[linear-gradient(in_oklab_90deg,_#0077a3_0%,_#f59e0b_100%)], met spaties als underscores geschreven, zoals Tailwind verwacht. Plak hem in class - geen configuratie nodig.

Waarom kan ik een conisch verloop niet als SVG downloaden?

SVG kent alleen lineaire en radiale verlopen en kan een radiaal verloop niet herhalen zoals CSS dat doet. Download in die gevallen een PNG: die wordt pixel voor pixel met dezelfde berekeningen getekend en komt dus exact overeen met de CSS, in elk formaat dat je kiest.

Is de deellink privé?

Het verloop staat in de link na het #-teken, een deel dat browsers nooit naar een server sturen, en de pagina wordt volledig in je browser getekend. Er wordt niets geüpload, en het verloop wordt alleen op dit apparaat bewaard, zodat het er nog is als je terugkomt.