Zo werkt het
- Kies bij Type voor Lineair, Radiaal of Conisch.
- Stel Hoek in voor Lineair of Conisch. Kies Vorm voor Radiaal, en Positie voor Radiaal of Conisch.
- Kies bij Kleurstops je kleuren met de kleurenkiezer of vul hex-kleurcodes in.
- Klik op + Kleurstop toevoegen als je meer kleuren wilt gebruiken.
- Klik op CSS kopiëren voor de volledige CSS-declaratie, of op Waarde kopiëren voor alleen de gradient-functie. Zonder geselecteerde tekst werkt ook Ctrl+Shift+C of Cmd+Shift+C.
Voorbeelden
Oranje achtergrond voor een Koningsdagpagina
Invoer
Lineair, 90° · #FF6600 op 0% · #FFB347 op 100%
Uitvoer
background: linear-gradient(90deg, #FF6600 0%, #FFB347 100%);
Zachte gloed achter een productfoto
Invoer
Radiaal, Ellips, linksboven · #2451E8 op 0%, 70% dekking · #2451E8 op 100%, 0% dekking
Uitvoer
background: radial-gradient(ellipse at top left, rgba(36, 81, 232, 0.7) 0%, rgba(36, 81, 232, 0) 100%);
Herhalende strepen voor een actiebanner
Invoer
Lineair, 45°, Herhalend · #FFFFFF op 0% en 10% · #E8EEF9 op 10% en 20%
Uitvoer
background: repeating-linear-gradient(45deg, #FFFFFF 0%, #FFFFFF 10%, #E8EEF9 10%, #E8EEF9 20%);
Tips
- Kies exacte kleuren en controleer het contrast met de kleurenkiezer.
- Probeer het verloop in een pagina met de HTML Editor.
Veelgestelde vragen
Waarom zie ik geen verschil met Herhalend?
Als de laatste kleurstop op 100% staat, heeft Herhalend geen zichtbaar effect. Zet die kleurstop lager, bijvoorbeeld op 25%.
Kan ik rgb() of hsl() invoeren?
De kleurvelden accepteren alleen hex-kleurcodes, zoals #F60 of #FF6600. Je kunt ook de kleurenkiezer gebruiken; rgb(), hsl() en kleurnamen worden niet geaccepteerd.
Waarom verandert mijn CSS niet na een invoer?
Bij ongeldige invoer wordt het veld gemarkeerd en blijven het voorbeeld en de CSS op het laatste geldige kleurverloop staan. Gebruik hele graden van 0 tot 360 en hele percentages van 0 tot 100.
Wordt mijn kleurverloop bewaard?
Je laatste geldige instellingen worden in localStorage in je browser bewaard en bij een volgend bezoek hersteld. Klik op Resetten om die opgeslagen instellingen te verwijderen.