CSS-gradient-generator
Ontwerp een gradient en kopieer kant-en-klare CSS-code.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
Maak de perfecte gradient zonder één regel CSS te schrijven
Gradients zijn overal in modern design: hero-achtergronden, knoppen, kaarten, decoratieve tekst. Met deze generator stel je ze visueel samen — kleuren, posities, hoek, type — en kopieer je schone, productieklare CSS-code.
-
Kies het type
Lineair voor een gerichte overgang, radiaal voor een centrale gloed, conisch voor wiel- of taarteffecten.
-
Pas kleuren en posities aan
Wijzig elke kleur met de kiezer, verschuif de positie met de schuif, voeg tot 6 stops toe. De knop Willekeurig stelt harmonieuze combinaties voor.
-
Kopieer de CSS
De code wordt realtime bijgewerkt. Eén klik en hij staat op je klembord.
Drie functies, drie geometrieën
| Functie | Geometrie | Typisch gebruik |
|---|---|---|
| linear-gradient(hoek, …) | Gerichte rechte lijn | Achtergronden, knoppen, overlays |
| radial-gradient(circle, …) | Concentrische cirkels | Glows, spotlights, vignetten |
| conic-gradient(from hoek, …) | Rotatie rond het midden | Taartdiagrammen, kleurenwielen, geanimeerde randen |
Tips voor geslaagde gradients
- Blijf bij naburige (analoge) tinten voor een zacht resultaat; tegenovergestelde tinten passeren doffe grijze zones.
- Voor gradient-tekst combineer je background-clip: text met color: transparent.
- Voeg op grote vlakken subtiele ruis toe om zichtbare strepen (banding) te vermijden.
- Let op contrast: tekst op een gradient moet over het hele kleurbereik leesbaar blijven.
De gegenereerde code gebruikt hexkleuren voor maximale compatibiliteit. In je project kun je ze vervangen door CSS-variabelen (var(--mijn-kleur)).
Veelgestelde vragen
Wat is het verschil tussen linear, radial en conic?
linear-gradient verloopt in een rechte lijn onder een hoek; radial-gradient straalt vanuit het midden naar buiten; conic-gradient draait rond het midden als een kleurenwiel. Alle drie accepteren dezelfde kleurenlijsten.
Hoeveel kleuren kan ik gebruiken?
De tool ondersteunt tot 6 stops, wat bijna elke behoefte dekt. In pure CSS is het aantal onbeperkt, maar boven 4 à 5 kleuren wordt een gradient al snel moeilijk te beheersen.
Wat betekenen de percentages naast de kleuren?
Dat is de positie van de stop langs de as van de gradient: 0 % aan het begin, 100 % aan het einde. Twee dichte stops geven een scherpe overgang, twee verre stops een geleidelijke menging.
Werkt de gegenereerde code in alle browsers?
linear-gradient en radial-gradient worden al jaren overal ondersteund. conic-gradient is beschikbaar in alle moderne browsers (Chrome 69+, Firefox 83+, Safari 12.1+).
Hoe animeer ik een CSS-gradient?
Gradients zijn niet direct te animeren, maar twee technieken werken goed: background-position animeren op een uitvergrote gradient (background-size: 200 %), of kleuren animeren via custom properties geregistreerd met @property.