CSS gradient generator – gratis online
CSS gradient maken online met de gratis CSS gradient generator. Handige tool voor ontwikkelaars – werkt volledig lokaal, zonder gegevensoverdracht.
Visuele CSS gradient generator
Je hoeft de syntaxis van CSS-gradiënten niet uit je hoofd te kennen. Kies twee kleuren, kies lineair of radiaal, stel de hoek in en kopieer de kant-en-klare CSS. Het voorbeeld werkt live bij terwijl je wijzigt.
Zo werkt het
- Kies het type lineair of radiaal.
- Kies je twee kleuren met de kleurkiezers.
- Stel de hoek in (alleen voor lineaire gradiënten).
- Probeer Willekeurig voor inspiratie of Omkeren om de richting te draaien.
- Kopieer de CSS en plak die in de
background-eigenschap van je stylesheet.
Veelvoorkomende toepassingen
- Achtergronden van hero-secties
- Knopstaten en call-to-actions
- Achtergronden van kaarten
- Opstartschermen van mobiele apps
Privacy
Alle verwerking gebeurt lokaal in je browser. Er worden geen gegevens naar een server gestuurd.
Zoek eerst de perfecte kleuren met de kleurenkiezer uit afbeelding.
Veelgestelde vragen
Is deze tool gratis?
Ja. De tool werkt gratis in je browser en je hebt er geen account voor nodig.
Moet ik iets installeren?
Nee. Alles werkt in een gewone moderne browser — op desktop en mobiel, zonder extra software.
Worden mijn gegevens naar een server gestuurd?
Nee. Alle verwerking gebeurt lokaal in je browser. Je gegevens verlaten je apparaat niet.
Welke CSS gebruik ik — lineair of radiaal?
Lineair geeft een overgang langs de gekozen hoek en past bij sectieachtergronden en knoppen. Radiaal straalt vanuit het midden uit en werkt goed voor spotlight- of glans-effecten.
Kan ik de hoek van de gradiënt aanpassen?
Ja, voor een lineaire gradiënt. De hoekschuif verandert de richting van de overgang en het voorbeeld werkt live bij.
Waarom ziet de gradiënt er anders uit in mijn browser?
Browsers kunnen kleurovergangen iets anders renderen. Controleer het resultaat in je doelbrowser en pas de kleuren zo nodig aan.