Wat is CSS Gradient Generator?
De CSS Gradient Generator is een visueel hulpmiddel voor het maken van CSS-verloopachtergronden zonder de syntax te hoeven onthouden. U kiest het verlooptype, selecteert kleuren en hun stopposities, en past de hoek aan.
Snel antwoord
Bouw lineaire, radiale en conische CSS-verlopen visueel met een live voorbeeld. Voeg tot drie kleurstops toe met positiepercentages, pas de hoek aan en schakel de herhaalmodus in. Kopieer de CSS background-eigenschap direct.
Last updated: 2026-06-11
Beperkingen
- Deze tool ondersteunt drie kleurstops voor eenvoud.
- Radiale verlopen worden alleen in cirkelvorm gegenereerd.
- De tool genereert geen vendor-geprefixte CSS (-webkit-, -moz-).
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Selecteer het verlooptype: Lineair (rechte lijn), Radiaal (cirkelvormig vanuit midden) of Conisch (kleurenwieldraaiing).
- Stel de hoek in om de verlooprichting te regelen. Voor lineair is 0deg van onder naar boven.
- Kies twee of drie kleuren en stel hun positiepercentages in. 0% aan het begin, 100% aan het einde.
- Schakel de herhaalmodus in voor patroonuitvoer. Kopieer de CSS background-eigenschap naar uw stylesheet.
Waarvoor je het kunt gebruiken
- Ontwerp een moderne hero-sectie-achtergrond met een diagonaal blauw-naar-paars verloop op 135 graden.
- Maak een conisch verloop voor een cirkeldiagram of kleurenwiel dat rond een middelpunt draait.
- Bouw een gestreepte patroonachtergrond met repeating-linear-gradient en strakke kleurstopposities.