Webtools

Verloop-generator

Bouw CSS-gradiënten met kopieerbare uitvoer

Kleurstops

CSS

Over de CSS Gradient Generator

Deze gradientgenerator maakt CSS lineaire en radiale gradiënten visueel. Kies uw gradienttype, hoek en kleurstops, en kopieer vervolgens de klare CSS-regel. Ondersteunt meerdere kleurstops en realtime-preview zodat u precies kunt zien hoe de gradiënt eruit ziet voordat u deze gebruikt.

Gradiënten worden veel gebruikt in modern webdesign voor achtergronden, knoppen, heldengedeelten en overlays op afbeeldingen. Deze tool bespaart tijd door automatisch de cross-browser CSS-syntaxis te genereren — u hoeft de exacte gradiëntsyntaxis niet te onthouden of kleurstoppercentages handmatig te berekenen.

Veelgestelde vragen

Lineair of radiaal — wanneer welke gebruiken?
Lineaire gradiënten creëren een gevoel van lichtrichting en zijn geweldig voor achtergronden, kopteksten en knoppen. Radiale gradiënten suggereren een brandpunt of diepte, nuttig voor spotlights, vignetteringen en decoratieve elementen.
Kan ik meer dan twee kleurstops toevoegen?
Ja. Gradiënten met meerdere stops laten u regenboegen, zonsondergangen en meer genuanceerde overgangen maken. Stops kunnen op elk percentage langs de gradientlijn worden geplaatst — niet alleen op de eindpunten.