Kies kleuren en richting om een CSS linear-gradient te genereren. Voorvertoning wordt live bijgewerkt. Kopieer de CSS wanneer klaar. Draait in je browser.
0%
100%
background: linear-gradient(to right, #3b82f6, #8b5cf6);
Over CSS-gradientgenerator
Deze tool bouwt een CSS linear-gradient uit je gekozen richting en kleuren. Je kunt meerdere kleurstops toevoegen. De voorvertoning en CSS worden bijgewerkt wanneer je opties wijzigt. Kopieer het fragment naar je stylesheet.
Hoe te gebruiken
- Selecteer richting (bijv. naar rechts, 45deg).
- Kies kleuren met de kleurenkiezer of voer hex in. Voeg meer kleuren toe indien nodig.
- Kopieer de gegenereerde CSS en plak het in je project.
Veelgestelde vragen
Kan ik meer dan twee kleuren toevoegen?
Ja. Gebruik Kleur toevoegen om stops toe te voegen. Je kunt ze herordenen of verwijderen. Elke stop kan een positie hebben (bijv. 50%).
Wordt mijn gradient naar een server gestuurd?
Nee. De CSS wordt in je browser opgebouwd.
Welke browsers ondersteunen linear-gradient?
Alle moderne browsers ondersteunen linear-gradient. De tool geeft standaard CSS uit; voeg vendor prefixes toe als je oudere ondersteuning nodig hebt.