CSS-gradiëntgenerator
Ontwerp lineaire en radiale gradiënten visueel en kopieer daarna de gebruiksklare CSS. Alles wordt live bijgewerkt in je browser.
Hoe een CSS-gradiënt te maken
- Kies lineair of radiaal en stel daarna de hoek in voor een lineaire gradiënt.
- Kies kleuren voor je stops en stel elke positie in van 0 tot 100.
- Voeg stops toe of verwijder ze om de overgang naar wens vorm te geven.
- Kopieer de gegenereerde CSS naar je stylesheet of style-attribuut.
Veelgestelde vragen
Wat is een lineaire gradiënt?
Een lineaire gradiënt mengt kleuren langs een rechte lijn onder de hoek die je kiest, van 0 tot 360 graden.
Wat is een radiale gradiënt?
Een radiale gradiënt mengt kleuren naar buiten vanuit een middelpunt in een ronde of elliptische vorm.
Wat betekenen de positienummers?
Elke positie is een percentage langs de gradiënt, van 0% aan het begin tot 100% aan het einde. Stops worden automatisch op positie gesorteerd.
Werkt de gradiënt in alle browsers?
Ja. De gegenereerde CSS gebruikt de standaardfuncties linear-gradient en radial-gradient die elke moderne browser ondersteunt.
Gerelateerde tools
Waarom een gradiëntgenerator gebruiken?
Gebruik de CSS-gradiëntgenerator om vloeiende kleurovergangen visueel te ontwerpen in plaats van te gokken naar waarden in code, en kopieer direct productieklare CSS.
- De gradiënt live zien veranderen terwijl je kleuren, hoeken en stops aanpast.
- Exacte, geldige CSS kopiëren zonder te zoeken naar syntaxisfouten.
- In seconden achtergronden met meerdere stops bouwen voor knoppen, banners en secties.
Tips en beperkingen
Je kunt zoveel kleurstops toevoegen als je wilt en de generator houdt er minstens twee aan zodat de gradiënt altijd geldig is. Stops worden vóór het genereren van de CSS op positie gesorteerd.