CSS gradient generator
Vorm een kleurverloop visueel en kopieer CSS die in elke moderne browser werkt.
Verzegeld op dit apparaat
Werkt in je browser. Er wordt niets geüpload.
Verzegeld
Voorbeeld
Kleurstops
Sleep de stops, of kies er een en gebruik de pijltoetsen. Klik op de balk om een stop toe te voegen.
Instellingen
OKLCH en OKLab vermijden de doffe grijze zone in het midden van sommige verlopen. Voor oudere browsers wordt een standaardversie meegegeven.
CSS-code
Zo werkt het
-
Kies een type
Kies een lineair, radiaal of conisch verloop, of begin met een preset, en stel de hoek of het middelpunt in.
-
Bewerk de kleuren
Sleep de kleurstops over de balk, klik op de balk om er meer toe te voegen, en wijzig de kleur en positie van elke stop.
-
Kopieer de CSS
Kopieer de gegenereerde code en plak hem als achtergrond in je stylesheet.
Veelgestelde vragen
Wat is het verschil tussen een lineair, radiaal en conisch verloop?
Een lineair verloop verandert van kleur langs een rechte lijn onder de hoek die je kiest. Een radiaal verloop spreidt zich vanuit een middelpunt uit in een cirkel of ellips. Een conisch verloop draait rond een middelpunt, zoals de wijzers van een klok. Handig voor kleurenwielen en cirkeldiagrammen.
Werkt de gegenereerde CSS in alle browsers?
Lineaire, radiale en conische verlopen werken in alle huidige browsers. Kies je menging in OKLCH of OKLab, dan bevat de code eerst ook een standaardregel, zodat oudere browsers toch een verloop tonen.
Waarom ziet mijn verloop er grijs uit in het midden?
Twee heel verschillende kleuren mengen in de standaard sRGB-ruimte gaat vaak door een modderig grijs. Zet de menging op OKLCH of OKLab: de kleuren worden gemengd zoals het oog ze waarneemt, dus het midden blijft helder.
Kan ik transparante kleuren gebruiken?
Ja. Typ een kleur met transparantie, zoals rgb(52 66 217 / 0.4) of #3442d966, in het kleurveld van een stop. Ideaal voor overlays boven op afbeeldingen.
Hoeveel kleurstops kan ik toevoegen?
Zoveel als je nodig hebt. Elke stop kun je verplaatsen met de muis, met je vinger of met de pijltoetsen, en verwijderen zolang er twee stops overblijven.