CSS-gradiëntgenerator
색상 정지점
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
- 1 Type selecteren — Kies het gradiënttype (lineair, radiaal, conisch).
- 2 Kleurstops aanpassen — Pas de kleur en positie van elke kleurstop aan.
- 3 Voorbeeld — Controleer het resultaat in realtime in het voorbeeld.
- 4 CSS-code kopiëren — Kopieer de CSS-code naar het klembord met de knop 'Kopiëren'.
Gerelateerde tools
CSS box-shadow generator Gratis 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 generator Gratis 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 Converter Gratis 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.