CSS Verloopgenerator
Bouw lineaire, radiale en conische CSS-verlopen met meerdere kleurstops en kopieer de code.
background: —;
Alles draait in je browser — geen upload, geen registratie.
Over CSS Verloopgenerator
De CSS Gradient Generator bouwt lineaire, radiale en conische gradients met volledige visuele controle. Voeg kleurstops toe door op de gradientbalk te klikken, sleep ze om ze te herpositioneren, en geef elke stop zijn eigen kleur, dekking en positie. Lineaire gradients krijgen een hoekregelaar; radiale een vorm (cirkel of ellips) en positie; conische een startangel.
De live voorbeeldweergave toont precies wat de browser gaat renderen, en een randomize-knop plus een reeks samengestelde presets zijn er wanneer je een startpunt nodig hebt in plaats van een leeg canvas. Stops kunnen vrij worden toegevoegd en verwijderd — een gradient heeft alleen minstens twee nodig.
Zodra het er goed uitziet, kopieer je de kale gradientwaarde of een complete CSS-regel. De generator draait volledig in je browser, zonder upload en zonder registratie, wat hem een handige metgezel maakt voor knoppen, hero-achtergronden, randen en teksteffecten.
Hoe gebruik je CSS Verloopgenerator
- Kies het gradienttype: linear, radial of conic.
- Stel de hoek in (linear), de vorm en positie (radial), of de starthoek (conic).
- Klik op de gradientbalk om kleurstops toe te voegen en sleep ze in positie.
- Geef elke stop zijn kleur, dekking en exacte positie.
- Probeer de presets of de randomize-knop voor snelle inspiratie.
- Kopieer de gradientwaarde of de volledige CSS-regel.