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.