Bouw lineaire, radiale en conische CSS-verlopen van nul af met versleepbare multi-stop bediening en samengestelde presets. Kopieer direct klaar-voor-gebruik CSS.

Live voorvertoning
Presets
Verlooptype
Hoek
°
Kleurstops
Sleep een greep om een stop te verplaatsen, of klik op de balk om er een toe te voegen. Selecteer een stop om de kleur te bewerken.
Geselecteerde stop
%
CSS
background: ;

Alles wordt live in je browser berekend — geen aanmelding, volledig gratis.


Over Verloopgenerator

De Gradiënt Generator bouwt aangepaste CSS-gradiënten vanaf nul. Kies een lineair, radiaal of conisch type, stel de hoek in, en vorm de mix met een editor met meerdere stops: sleep grepen om stops te verplaatsen, klik op de balk om nieuwe toe te voegen, en herkleur elke stop met een kiezer: de live preview wordt bijgewerkt terwijl je werkt.

Uitgewerkte presets geven je een sterk startpunt wanneer je niet vanaf een leeg canvas wilt beginnen, en klikacties (willekeurig, omkeren, 45° draaien) maken verkennen snel. De gegenereerde CSS is altijd zichtbaar en blijft synchroon met de preview, dus wat je kopieert is precies wat je zag.

Alles wordt live in je browser berekend, zonder kosten. Kopieer de volledige CSS-regel of alleen de achtergrondwaarde en plak deze in een stylesheet, een knopstijl of een hero-sectie: een eenvoudige CSS-gradiëntgenerator voor achtergronden, overlays en UI-accenten.

Hoe gebruik je Verloopgenerator

  1. Kies een gradiënttype: lineair, radiaal of conisch.
  2. Begin bij een preset of klik op "Willekeurig" voor een direct startpunt.
  3. Sleep de stopgrepen om kleuren te positioneren, klik op de balk om stops toe te voegen, en bewerk de kleur van elke stop.
  4. Pas de hoek aan, of gebruik "Omkeren" en "45° draaien" om de mix opnieuw te richten.
  5. Kopieer de CSS-regel of de achtergrondwaarde en plak deze in je project.

Veelgestelde vragen

Ja. De tool is volledig client-side: geen registratie, geen credits en geen limieten op hoeveel gradiënten je bouwt of kopieert.

Een lineaire gradiënt mengt kleuren langs een rechte lijn onder je gekozen hoek. Een radiale gradiënt straalt naar buiten uit vanaf een middelpunt in cirkels. Een conische gradiënt veegt kleuren rond een middelpunt als een taartdiagram, wat geweldig is voor kleurenwielen en voortgangsringen.

Een gradiënt heeft minstens twee stops nodig, en je kunt blijven klikken op de balk om er meer toe te voegen. Elke stop heeft een eigen kleur en versleepbare positie, zodat complexe meerkleurige mixen makkelijk te bouwen zijn.

Lineaire en radiale gradiënten worden overal ondersteund. Conische gradiënten worden ondersteund in alle moderne browsers maar niet in erg oude, dus zorg voor een reservekleur (background-color) als je verouderde versies moet ondersteunen.

Ja: gebruik de bijbehorende tool Gradiënt Generator vanuit Afbeelding, die de dominante kleuren van een geüploade foto extraheert en omzet in bewerkbare gradiëntstops. Deze tool is de vanaf-nul-tegenhanger.


Populaire zoekopdrachten
verloop generator css verloop maker lineair verloop generator radiaal verloop maker conisch verloop css gratis verloop generator
Hulp nodig?
Een probleem met deze tool gevonden? Laat het ons weten.
Een probleem melden

Voeg deze gratis tool toe aan je eigen website — kopieer en plak de onderstaande code.