Belangrijkste punten
- 01Alle drie CSS-gradiënttypes — lineair, radiaal en kegelsnede — worden ondersteund met live preview.
- 02Voeg tot zes kleurstops toe, elk met een onafhankelijke positie en kleur.
- 03De uitvoer is een volledige background-declaratie die klaar is om in elke stylesheet in te plakken.
- 04Geen registratie, geen installatie en niets wordt geüpload — alles draait in je browser.
Waarom een visuele gradiëntgenerator gebruiken?
CSS-gradiënten met de hand schrijven wordt snel vervelend. De syntaxis is begrijpelijk als je deze kent, maar het kiezen van exacte stopposities en kleuren zonder visuele preview verandert een eenvoudige ontwerpkeuze in trial-and-error in DevTools. Een generator laat je het resultaat in real-time zien en exporteert schone code zodra het er goed uitziet.
Deze tool ondersteunt alle drie moderne gradiënttypes. Lineair is de klassieke directionele overgang die je gebruikt voor hero-achtergronden en knoppen. Radiaal verspreidt zich vanuit een punt — ideaal voor spotlighteffecten en vignetjes. Kegelsnede zwaait rond een middelpunt, wat het de go-to maakt voor taartdiagramsegmenten, kleurwielen en spinner-indicatoren. Begin met een van de ingebouwde presets (Lime Swiss, Sunset, Sky, Aurora) of ontwerp helemaal zelf.
Een CSS-gradiënt genereren
Het hele proces duurt minder dan een minuut.
- 01
Kies een gradiënttype
Selecteer Lineair, Radiaal of Kegelsnede in de typeselector. Voor lineair stel je ook de hoek in. De preview werkt direct bij.
- 02
Voeg kleurstops toe en positioneer ze
Klik op Stop toevoegen om een nieuwe stop in te voegen, sleep vervolgens de schuifregelaar of typ een percentage om deze te positioneren. Tot zes stops worden ondersteund — stops sorteren automatisch op positie.
- 03
Kies de kleur van elke stop
Klik op het kleurvak om de systeemkleurkiezer te openen, of typ rechtstreeks een hexadecimale waarde. Zowel RGB- als hex-formaten werken.
- 04
Real-time preview
Het previewpaneel rendert je gradiënt met behulp van de native gradiëntengine van de browser, dus het resultaat komt exact overeen met wat de CSS in productie zal produceren.
- 05
Kopieer de CSS-declaratie
Klik op Kopiëren om de volledige background: linear-gradient(...) declaratie op te halen. Plak deze in een stylesheet, een styled component of een Tailwind-willekeurige waarde zoals bg-[<value>].
Veelvoorkomende gradiënt-gebruikssituaties
Elk gradiënttype blinkt uit in een ander scenario.
- 01Hero-sectieachtergronden — lineaire gradiënt op 135° voor een modern diagonaal effect.
- 02Knophoverstaten — subtiele twee-stop lineaire gradiënt voor diepte.
- 03Radiaal spotlight of vignet — donker-naar-transparant radiaal op een afbeeldingsoverlay.
- 04Taartdiagrammen en voortgangsringen — kegelsnede gradiënt met harde stops.
- 05Kleurwielkiezer-previews — volledig spectrum kegelsnede gradiënt.
- 06Tekstgradiënten — pas de gradiënt toe op de achtergrond, gebruik vervolgens background-clip: text.
Draait volledig in je browser
De gradiëntgenerator draait 100% client-side — geen gegevens worden naar een server verzonden. De preview wordt weergegeven door de eigen CSS-engine van je browser, wat betekent dat wat je ziet overeenkomt met wat elke bezoeker's browser zal weergeven met dezelfde CSS.
Een praktische opmerking: e-mailclients hebben nog steeds onvoldoende ondersteuning voor CSS-gradiënten. Als je gegenereerde CSS in een HTML-e-mailsjabloon plakt, voeg dan een vaste background-color fallback toe vóór de gradiëntdeclaratie, zodat ontvangers op oudere clients iets redelijks zien.
Veelgestelde vragen over CSS-gradiëntgenerator
Wat is het verschil tussen lineaire, radiale en kegelsnede gradiënten?
Lineaire gradiënten gaan over in een rechte lijn onder een bepaalde hoek. Radiale gradiënten verspreiden zich vanuit een middelpunt — handig voor highlights en spoteffecten. Kegelsnede gradiënten zwaaien rond een middelpunt als klokwijzers — ideaal voor taartdiagramsegmenten en kleurwielen.
Kan ik dit gebruiken voor Tailwind CSS-projecten?
Ja. Kopieer de gegenereerde waarde en gebruik deze als Tailwind-willekeurige waarde, bijvoorbeeld: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind zal het in je uitvoerstylesheet opnemen.
Komt de preview exact overeen met wat ik op de live site zal zien?
Ja — de preview wordt weergegeven door dezelfde browser-gradiëntengine die je live CSS zal weergeven, dus de uitvoer is pixelperfect.
Kan ik CSS-gradiënten in e-mailsjablonen gebruiken?
De meeste e-mailclients ondersteunen CSS-gradiënten niet betrouwbaar. Voeg altijd een vaste background-color toe vóór je gradiëntdeclaratie als fallback.
Is er een limiet voor het aantal kleurstops?
De generator ondersteunt tot zes stops. Voor de meeste ontwerpen zijn twee tot vier voldoende; meer dan zes vermindert eerder de duidelijkheid dan dat het rijkdom toevoegt.