CSS gradient generator — verloopachtergronden maken

Bijgewerkt op 9 maart 2026

Verloopachtergronden geven je website of app net dat beetje extra. Met de gradient generator van Ster Software maak je CSS-gradients en kopieer je de code direct naar je project.

🌅 Gradient maken →

Gradient-types uitgelegd

Lineair verloop (linear-gradient)

Kleuren verlopen langs een rechte lijn in een instelbare richting (hoek). Dit is het gradient-type dat je het vaakst ziet: achtergronden, knoppen, headers.

Radiaal verloop (radial-gradient)

Kleuren verlopen vanuit een middelpunt naar buiten als een cirkel of ellips. Werkt goed voor diepte-effecten en spotlight-looks.

Conisch verloop (conic-gradient)

Kleuren verlopen rondom een middelpunt, als een kleurenwiel. Geeft een bijzonder effect bij grafieken, badges en decoratieve elementen.

Hoe gebruik je de gradient generator?

  1. 1Open de gradient generator.
  2. 2Kies het gradient-type en stel de kleuren en stops in.
  3. 3Pas de hoek of richting aan via de schuifregelaar.
  4. 4Kopieer de gegenereerde CSS-code en plak hem direct in je stylesheet.

Toepassingen

  • ✓Hero-secties op websites met een verloopachtergrond
  • ✓Knoppen met een gradient-achtergrond
  • ✓Kaartcomponenten in web-apps
  • ✓Tekst voorzien van een gradient-kleur (met CSS background-clip: text)

Veelgestelde vragen

Kan ik meer dan twee kleuren gebruiken?

Ja, je kunt meerdere kleurstops toevoegen voor gradients met drie of meer kleuren.

Werkt de gegenereerde CSS in alle browsers?

Ja. linear-gradient en radial-gradient werken in alle moderne browsers. conic-gradient ook, maar niet in Internet Explorer.

Gerelateerde kleurentools

🌅 Gradient maken →