CodeKitHubWat is deze tool?
CSS-gradients zijn afbeeldingen die de browser genereert op basis van een lijst kleuren, in plaats van bestanden die je uploadt — linear-gradient() laat kleuren overgaan langs een rechte lijn onder een gegeven hoek, terwijl radial-gradient() kleuren naar buiten laat overgaan vanuit een middelpunt. Beide accepteren twee of meer kleurstops, elk optioneel vastgezet op een positie langs de gradient.
Met de hand geschreven zijn gradients makkelijk subtiel fout te doen: verkeerde volgorde van stops, ontbrekende percentages, of een hoekwaarde in de verkeerde richting (CSS-hoeken lopen met de klok mee vanaf 'to top', anders dan wiskundige hoeken). Deze tool houdt de syntax uit de weg — stel kleuren en posities in met kiezers en schuiven, bekijk hoe het voorbeeldvak realtime bijwerkt, en kopieer de resulterende CSS zodra het er goed uitziet.
Bron: CSS Images Module Level 3, W3C — de specificatie die de syntax van linear-gradient() en radial-gradient() definieert.
Waarom gebruiken?
- Live voorbeeld werkt direct bij bij elke kleur-, positie- en hoekverandering — geen paginaherlading nodig om het resultaat te zien.
- Schakel met één klik tussen lineaire en radiale gradients; de hoekregeling verbergt zich automatisch bij radiale gradients, waar hij niet van toepassing is.
- Voeg kleurstops toe of verwijder ze (2 tot 4) in plaats van beperkt te zijn tot een vaste tweekleurige gradient.
- Elke stop heeft zijn eigen positieschuif, dus stops hoeven niet gelijkmatig verdeeld te zijn.
- Levert klaar-om-te-plakken CSS met de standaard linear-gradient()/radial-gradient()-syntax.
- Draait volledig in je browser — niets van wat je configureert wordt ergens naartoe geüpload. Gratis, geen aanmelding, werkt op mobiel.
Hoe te gebruiken
- Kies Linear of Radial als gradienttype.
- Sleep voor een lineaire gradient de hoekschuif — 90deg gaat van links naar rechts, 180deg van boven naar onder, enzovoort.
- Stel de kleur en positie voor elke stop in; de eerste stop is de startkleur van de gradient, de laatste de eindkleur.
- Klik op '+ Add stop' om tot maximaal 4 stops toe te voegen voor een gradient met meerdere kleuren, of op de ✕-knop om er een te verwijderen (minimaal 2).
- Kopieer de gegenereerde CSS en plak hem in een background- of background-image-declaratie.
Voorbeeld
Invoer
Linear · Hoek: 90deg · Stops: #f97316 op 0%, #ec4899 op 100%Uitvoer
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Een gradient van oranje naar roze, van links naar rechts — een gangbare stijl voor knoppen, banners en hero-achtergronden.
Lineaire versus radiale gradients
Een lineaire gradient laat kleur overgaan langs een rechte lijn, geregeld door een hoek — nuttig voor banners, knoppen en gerichte achtergronden. Een radiale gradient laat kleur naar buiten overgaan vanuit een middelpunt in uitdijende ringen, wat past bij spotlight-effecten, badges of gloed-achtige achtergronden. Deze tool zet de radiale gradient standaard op een cirkelvorm gecentreerd in het vak, wat de meest voorkomende radiale toepassing dekt; CSS ondersteunt ook ellipsvormen en niet-gecentreerde posities als je de uitvoer verder handmatig wilt bewerken.
Veelvoorkomende gradientpatronen
- Subtiel merkaccent: twee dicht bij elkaar liggende tinten (bijv. twee schakeringen van dezelfde kleur) onder een ondiepe hoek voor een zachte achtergrondwash.
- Contrastrijke CTA-knop: twee verzadigde, complementaire kleuren onder 90deg of 135deg voor een gedurfde, klikbare uitstraling.
- Overlay op een afbeelding: een gradient van transparant naar een effen kleur (stel transparantie in via een rgba-kleur onder de onderliggende hex van de kiezer, of pas na het kopiëren aan) gelaagd over een background-image.
- Multi-stop regenboog-/merkgradient: 3–4 stops verspreid over het volledige bereik van 0–100% voor vloeiendere, geleidelijkere overgangen dan een tweekleurige gradient toelaat.
- Radiale spotlight: een heldere middenstop bij ongeveer 0% die vervaagt naar een donkerdere randstop bij ongeveer 100%, nuttig voor hero-secties of kaarthighlights.
Combineren met andere CSS-tools
Gradients worden vaak gecombineerd met afgeronde hoeken en schaduwen op hetzelfde element — een gradientkaart met een zachte box-shadow en afgeronde hoeken is een gangbaar UI-patroon. Genereer elk onderdeel apart en combineer de CSS-declaraties op het element.
→ Box Shadow Generator · Border Radius Generator · Kleurkiezer
Veelgestelde vragen
Wat is het verschil tussen linear-gradient() en radial-gradient()?
linear-gradient() laat kleuren overgaan langs een rechte lijn onder een opgegeven hoek. radial-gradient() laat kleuren naar buiten overgaan vanuit een middelpunt in uitdijende vormen (cirkel of ellips). Beide accepteren dezelfde soort kommagescheiden lijst van kleurstops; alleen de vorm van de overgang verschilt.
Hoe werken CSS-gradienthoeken?
CSS-gradienthoeken lopen met de klok mee vanaf 'to top' (0deg wijst omhoog). 90deg wijst naar rechts, 180deg naar beneden, en 270deg naar links — het tegenovergestelde van de standaard wiskundige hoekconventie, wat een veelvoorkomende bron van verwarring is bij het met de hand schrijven van gradients.
Kan ik meer dan 4 kleurstops gebruiken?
Ja — CSS-gradients accepteren elk aantal kommagescheiden kleurstops. Deze tool beperkt de interactieve bouwer tot 4 voor een overzichtelijke UI, maar je kunt de gegenereerde CSS kopiëren en handmatig meer kommagescheiden 'kleur positie%'-items in je stylesheet toevoegen.
Waarom oogt mijn gradient gebandeerd in plaats van vloeiend?
Bandering komt meestal door kleuren die te ver uiteenliggen in tint met te weinig stops ertussen, of door de eigen beperkte kleurprecisie van de browser bij zeer laag contrast. Een tussenliggende stop met een gemengde kleur toevoegen, of kleuren kiezen die dichter bij elkaar in tint liggen, levert meestal een vloeiender resultaat op.
Kan ik een CSS-gradient animeren?
Niet direct — gradients zijn niet van nature animeerbaar zoals background-position of transform dat wel zijn, omdat browsers niet kunnen interpoleren tussen twee willekeurige gradientdefinities. Gangbare oplossingen zijn het animeren van background-position op een te grote gradient, of het overgangen van background-color als er maar één kleur verandert.