Upgrade naar Premium — geen advertenties, meer mogelijkheden! ⚡ — Leer meer
Fetchlify

Gradiëntgenerator

Gradiënttype

Instellingen

Kleurstops

Position: 0%
Position: 100%

Voorinstellingen

Voorbeeld

CSS-code

background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);

Laat het ons weten

Deel uw ervaring.

4.9 (2.8k ratings)

Over Gradiëntgenerator

Genereer direct en gratis CSS-gradiënten. Maak lineaire en radiale gradiënten met meerdere kleuren. Pas de hoek, positie en kleurstops aan. Kopieer de CSS-code direct. Perfect voor webdesign en UI-ontwikkeling. Geen registratie vereist - werkt 100% in je browser.

Hoe te gebruiken

1

Stap 1

Selecteer het type gradiënt: lineair, radiaal of conisch.

2

Stap 2

Voeg kleurstops toe en pas ze aan (minimaal 2 kleuren)

3

Stap 3

Pas typespecifieke instellingen aan (hoek, vorm, positie).

4

Stap 4

Bekijk je kleurovergang in realtime.

5

Stap 5

Gebruik presets voor snelle inspiratie of genereer willekeurige kleurovergangen.

6

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.