NL

CSS gradient generator

Kies het soort kleurverloop, de richting en de kleuren. Stel elke kleurstop in met kleurkiezer en schuifregelaar en voeg er meer toe met ‘+ Kleurstop’. De generator schrijft het verloop in beknopte, geldige CSS en voegt een effen background-color als terugval toe, zodat tekst ook zonder gradient leesbaar blijft.

Verloop ontwerpen

background-color: #675BF0;
background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
°
0° = naar boven, 90° = naar rechts, 180° = naar beneden (standaard)
Eén stop per regel: een kleur en eventueel een positie in %, bijv. #3B82F6 0%
Leeg laten om het gemiddelde van de verloopkleuren te gebruiken
Je invoer wordt alleen in deze browser opgeslagen.

Resultaat

CSS-declaratie
background-color: #675BF0; background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
Alleen het verloop (voor background-image)
linear-gradient(90deg, #3B82F6 0%, #9333EA 100%)
Terugvalkleur (background-color)
#675BF0
Kleurstops met berekende posities
Nr.KleurOpgegeven positieGebruikte positie
1#3B82F60 %0 %
2#9333EA100 %100 %

Zo wordt het berekend

Drie soorten kleurverloop

FunctieVerloopStandaard (weggelaten)
linear-gradient()langs een rechte lijn onder de gekozen hoek180deg = van boven naar beneden
radial-gradient()vanuit het midden naar buitenellips, gecentreerd, tot de verste hoek
conic-gradient()rond het midden, zoals een taartdiagramvanaf 0deg (boven), met de klok mee

Bij een lineair verloop bepaalt de hoek de richting: 0deg wijst omhoog, 90deg naar rechts, 180deg omlaag. ‘Herhalen’ maakt repeating-linear-gradient() en verwante functies: het patroon tussen de eerste en laatste stop herhaalt zich – ideaal voor strepen.

Kleurstops en ontbrekende posities

Posities zijn optioneel. Ontbreken ze, dan geldt de W3C-specificatie (CSS Images, ‘Coloring the Gradient Line’): de eerste stop staat op 0%, de laatste op 100% en stops zonder positie daartussen worden gelijkmatig verdeeld. Is een positie kleiner dan een eerdere, dan wordt ze daartoe verhoogd – zo ontstaan harde randen. Twee posities achter elkaar (red 0% 50%) geven een effen band. De tabel toont per stop de positie die de browser echt gebruikt.

Waarom een terugvalkleur?

Gradients zijn afbeeldingen. Wordt de afbeelding niet getekend – bijvoorbeeld in de modus voor geforceerde kleuren of door een typfout in de waarde – dan blijft alleen background-color over. De generator gebruikt daarvoor het naar oppervlak gewogen gemiddelde van de kleuren.

Voorbeeld linear-gradient(90deg, #3B82F6 0%, #9333EA 100%): elke kleur beslaat de helft van de lijn. Rood (59 + 147) ÷ 2 = 103, groen (130 + 51) ÷ 2 = 90,5 ≈ 91, blauw (246 + 234) ÷ 2 = 240 – terugvalkleur #675BF0. Controleer het contrast van je tekst met deze kleur en met de lichtste en donkerste delen van het verloop.

Veelgestelde vragen

Hoe maak ik een kleurverloop in CSS?

Met background-image: linear-gradient(90deg, #3B82F6, #9333EA); – of met de verkorte eigenschap background. Zet er een background-color als terugval voor. De generator geeft je beide regels klaar om te kopiëren.

Hoe krijg ik harde randen in plaats van vloeiende overgangen?

Geef twee stops dezelfde positie, bijv. red 50%, blue 50%, of geef één kleur twee posities: red 0% 50%, blue 50% 100%. Zet ‘Herhalen’ aan voor strepen.

Werkt conic-gradient in elke browser?

In alle actuele browsers wel (Chrome en Edge vanaf versie 69, Firefox vanaf 83, Safari vanaf 12.1). In heel oude browsers zorgt de terugvalkleur dat het vlak niet leeg blijft.

Kan ik transparante kleuren gebruiken?

Ja. Geef een stop op als rgba() of als HEX-waarde met 8 tekens, bijv. rgba(0, 0, 0, 0.5). Het voorbeeld toont transparantie op een schaakbordpatroon. De terugvalkleur is altijd effen.

Bronnen en wettelijke basis

Bijgewerkt op:

Vergelijkbare tools