CSS-gradiëntgenerator

Visuele CSS-gradient-generator voor lineaire, radiale en conische verlopen: zet kleurstops, pas de hoek aan en kopieer de CSS. Ideaal voor achtergronden en knoppen, gratis in je browser.

Herhalen

각도: 135deg

Kleurstop

100%

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Insluiten

<iframe src="https://devtools.patrache.studio/nl/generators/css-gradient/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="CSS-gradiëntgenerator — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/nl/generators/css-gradient/">CSS-gradiëntgenerator</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Laatst bijgewerkt: 2026 · Gratis online tool

Wat is CSS-gradiëntgenerator?

Visuele CSS-gradient-generator voor lineaire, radiale en conische verlopen: zet kleurstops, pas de hoek aan en kopieer de CSS. Ideaal voor achtergronden en knoppen, gratis in je browser.

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 generatorCSS-box-shadow-generator met regelaars voor offset, blur, spread, kleur en inset en een live voorbeeld van de schaduw. Kopieer de kant-en-klare box-shadow-CSS, gratis in je browser.

CSS border-radius generatorCSS-border-radius-generator met acht onafhankelijke hoekgrepen en schuifregelaars en een live voorbeeld van de afgeronde vorm. Kopieer de kant-en-klare border-radius-CSS, gratis in je browser.

Kleurcode ConverterKleurconverter tussen HEX-, RGB-, HSL- en OKLCH-codes, met de WCAG-contrastverhouding van twee kleuren. Zo controleer je toegankelijkheid terwijl je een palet kiest, gratis in je browser.

SVG-golfgeneratorGratis online SVG-golfgenerator met visuele editor voor vloeiende golfvormen. Pas amplitude, kleuren en lagen aan, gebruik kant-en-klare presets en kopieer de CSS- en SVG-code voor achtergronden en scheidingen.

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.