Gradiëntgenerator
Gradiënttype
Instellingen
Kleurstops
Voorinstellingen
Voorbeeld
CSS-code
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Laat het ons weten
Deel uw ervaring.
Vergelijkbare tools
135 graden betekent bovenlinks naar benedenrechts
De hoekconventie verwart een keer iedereen: in CSS wijst 0deg omhoog en draaien de graden met de klok mee — dus de werkpaardwaarde 135deg stroomt van de linkerbovenhoek naar de rechteronderhoek — daarom gebruikt bijna elke diagonale hero-achtergrond die waarde. Elke kleurstop draagt een positie van 0-100 %: de twee stops van een blauw-violet-verloop dichter bij elkaar (zeg 20 % en 80 %) maakt een zachte band, terwijl een stop op 0 % een kleur hard aan de rand laat beginnen. De toevalsknop springt tussen hele paletten wanneer je een startpunt zoekt om te verfijnen, geen leeg blad.
Banding, harde stops en dark-mode-tweelingen
Drie kwaliteitsproblemen scheiden een amateurverloop van een productieverloop. Subtiele verlopen op grote oppervlakken kunnen banding maken — zichtbare contourlijnen — vooral op schermen met lage bitdiepte; de afstand tussen de stops verbreden of de twee tonen licht uit elkaar schuiven verbergt het meestal. Twee verschillende kleuren op dezelfde positie scheppen een harde stop — zo maakt men strepen, geen overgangen. En een verloop afgestemd op een lichte pagina oogt op een donkere vaak modderig: de dark mode heeft zijn eigen paar nodig, typisch met luminosere middentonen, als aparte variant bewaard.
Over Gradiëntgenerator
Verlopen zijn de standaardachtergrond van het moderne web geworden — hero-banners, call-to-action-knoppen, laadschermen, kaartkoppen — en elk is één regel CSS die kleuren, hun stopposities en een richting vastlegt. Die regel met de hand schrijven kan; hem met het oog herhalen is sneller. De generator bestaat voor iteratie: schuif de stops, wissel tussen lineair en radiaal, en lees de kant-en-klare CSS rechtstreeks uit de tool.
Hoe te gebruiken
Stap 1
Selecteer het type gradiënt: lineair, radiaal of conisch.
Stap 2
Voeg kleurstops toe en pas ze aan (minimaal 2 kleuren)
Stap 3
Pas typespecifieke instellingen aan (hoek, vorm, positie).
Stap 4
Bekijk je kleurovergang in realtime.
Stap 5
Gebruik presets voor snelle inspiratie of genereer willekeurige kleurovergangen.
Stap 6
Kopieer de CSS-code om deze in je projecten te gebruiken.
Kenmerken en voordelen
- ✅3 soorten hellingen: lineair, radiaal en conisch.
- ✅Onbeperkt aantal kleurstops met positiecontrole
- ✅Volledige aanpassing: kleuren, hoeken, vormen, posities
- ✅8 prachtige presets: Zonsondergang, Oceaan, Bos, Paarse Droom, Vuur, Koele Blauwen, Regenboog, Perzik
- ✅Willekeurige gradiëntgenerator voor inspiratie
- ✅Realtime preview tijdens het aanpassen
- ✅CSS-code met één klik naar het klembord kopiëren.
- ✅Versleep de schuifregelaars om de kleurposities aan te passen.
- ✅100% gratis - geen watermerken, geen registratie vereist
- ✅Werkt offline - alle generatie vindt plaats in uw browser.
Veelgestelde vragen
Welke soorten verlopen worden ondersteund?
We ondersteunen 3 CSS-gradiënttypen: Lineair (rechte lijngradiënten met een instelbare hoek van 0-360°), Radiaal (cirkelvormige of elliptische gradiënten vanuit een middelpunt) en Conisch (cirkelvormige gradiënten die rond een middelpunt draaien, perfect voor cirkeldiagrammen en kleurencirkels).
Hoe voeg ik meer kleuren toe aan mijn kleurverloop?
Klik op de '+' knop in het gedeelte Kleurstops om een nieuwe kleur toe te voegen. Je kunt zoveel kleuren toevoegen als je wilt. Elke kleurstop heeft een schuifregelaar (0-100%) om te bepalen waar deze in het verloop verschijnt. Om een kleur te verwijderen, klik je op het prullenbakpictogram (minimaal 2 kleuren vereist).
Wat is het verschil tussen de verschillende soorten verlopen?
Lineaire verlopen laten kleuren in een rechte lijn in een bepaalde hoek overgaan. Radiale verlopen stralen vanuit een middelpunt naar buiten in een cirkel of ellips. Conische verlopen roteren kleuren rond een middelpunt, zoals een kleurencirkel, handig voor cirkeldiagrammen en cirkelvormige ontwerpen.
Hoe gebruik ik de gegenereerde CSS-code?
Klik op de knop 'Kopiëren' om de CSS-code naar uw klembord te kopiëren. Plak deze vervolgens in uw CSS-bestand of stijlkenmerk. De code bevat de volledige achtergrondeigenschap, bijvoorbeeld: background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Kan ik mijn kleurverlopen opslaan?
De tool slaat geen verlopen op, maar je kunt de CSS-code kopiëren en opslaan in je projectbestanden. Je kunt ook specifieke verloopconfiguraties bookmarken door de CSS-code op te slaan in een tekstbestand of ontwerpsysteem.
Wat zijn de vooraf ingestelde kleurverlopen?
We bieden 8 professioneel ontworpen verloopvoorinstellingen: Zonsondergang (warm rood naar geel), Oceaan (diepblauw naar cyaan), Bos (blauwgroen naar groen), Paarse Droom (paars naar roze), Vuur (radiaal geel naar rood), Koel Blauw (blauw verloop), Regenboog (conisch volledig spectrum) en Perzik (zachte perziktinten). Klik op een voorinstelling om deze direct toe te passen.
Hoe werkt de generator voor willekeurige gradiënten?
Klik op de knop 'Willekeurige gradiënt' om een volledig willekeurige gradiënt te genereren met 2-4 kleurstops, willekeurige kleuren en een willekeurig gradiënttype. Perfect om inspiratie op te doen of onverwachte kleurencombinaties te ontdekken.
Kan ik de positie van elke kleur aanpassen?
Ja! Elke kleurstop heeft een schuifregelaar waarmee je de positie van de kleur in het verloop kunt aanpassen (0-100%). Verschuif de schuifregelaar of voer een specifieke waarde in om de kleurovergangen nauwkeurig af te stellen. Kleuren die dichter bij elkaar liggen, zorgen voor scherpere overgangen, terwijl kleuren die verder uit elkaar liggen, zorgen voor vloeiendere overgangen.