CSS-gradiëntgenerator
Color Stop
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Laatst bijgewerkt: 2026 · Gratis online tool
Wat is CSS-gradiëntgenerator?
Gratis visuele CSS-gradiëntgenerator: ontwerp lineaire, radiale en conische gradiënten, pas kleurstops en hoek aan en kopieer de kant-en-klare CSS-code voor je achtergronden.
Gebruiksaanwijzing
- 1Type selecteren— Kies het gradiënttype (lineair, radiaal, conisch).
- 2Kleurstops aanpassen— Pas de kleur en positie van elke kleurstop aan.
- 3Voorbeeld— Controleer het resultaat in realtime in het voorbeeld.
- 4CSS-code kopiëren— Kopieer de CSS-code naar het klembord met de knop 'Kopiëren'.
Gerelateerde tools
CSS box-shadow generatorGratis online CSS box-shadow-generator met regelaars voor offset, blur, spread, kleur en inset, die een live preview van de schaduw geeft en kopieerklare box-shadow-CSS-code voor elk element oplevert.
CSS border-radius generatorGratis online CSS border-radius-generator met acht onafhankelijke hoekhandvatten en schuifregelaars, die een live preview van de afgeronde vorm geeft en kopieerklare border-radius-CSS-code oplevert.
Kleurcode ConverterGratis online kleurconverter die direct vertaalt tussen HEX-, RGB-, HSL- en OKLCH-codes en de WCAG-contrastverhouding tussen twee kleuren berekent, zodat u toegankelijkheid eenvoudig kunt controleren.
Veelgestelde vragen
Er is geen limiet, maar 2–6 is gebruikelijk. Te veel kan de prestaties beïnvloeden.
Ja. Schakel het selectievakje 'Herhalen' in om het repeating-voorvoegsel toe te voegen.
Vijf presets worden aangeboden: Sunset, Ocean, Forest, Midnight en Rainbow.
Momenteel wordt alleen pure CSS uitgevoerd. Tailwind-conversie is gepland voor een toekomstige update.
Nee. Alle verwerking gebeurt in de browser.