Gradient-syntax met de hand schrijven is lastig: de hoek, de volgorde van de stops en de percentages beïnvloeden elkaar, en één typefout breekt stilletjes de hele background. Deze generator houdt de preview en de code perfect gelijk - wat je ziet is byte voor byte de CSS die je kopieert. Alles draait client-side, dus er wordt niets van je ontwerp geupload.
Gratis CSS Gradient Generator
Draait volledig in je browser - niets uploaden, geen account.
Type
Kleurstops
CSS-code
Wat is een CSS gradient generator?
Een CSS gradient generator is een visuele tool die de code voor linear-gradient(), radial-gradient() of conic-gradient() voor je opbouwt. Kies je kleuren, sleep de stops naar de juiste positie, stel de hoek in en kopieer kant-en-klare CSS terwijl een live preview precies laat zien wat de browser rendert. Alles draait in je browser.
Zo werkt het
- 1Kies een gradient-type. Kies linear, radial of conic. Linear toont een hoek-slider; radial voegt vorm (circle of ellipse) en positie toe; conic heeft een startvoek en positie.
- 2Stel je kleurstops in. Klik op elk kleurvlak om een kleur te kiezen en sleep de slider om de stop langs de gradient te verplaatsen. Voeg tot 8 stops toe, of verwijder ze tot een minimum van 2.
- 3Pas de richting aan. Sleep de hoek-slider (0-360 graden) of kies een positie-trefwoord. De preview werkt live mee bij elke wijziging.
- 4Kopieer de CSS. Klik op Kopieer om de background-declaratie te pakken, inclusief een fallback-regel met een effen kleur, en plak die in je stylesheet.
Voor wie
- Front-end developers die een hero, card of button-achtergrond nodig hebben en de exacte
linear-gradient()-regel willen zonder de syntax uit het hoofd te leren. - Web- en UI-designers die een mockup natrekken: bouw de gradient visueel na en geef de gegenereerde CSS direct door aan het devteam.
- Bouwers van e-mails en landingspagina's die een fallback-regel met een effen kleur nodig hebben, zodat het ontwerp netjes degradeert in oude clients - die regel zit er automatisch bij.
- Studenten die CSS leren en willen zien hoe hoek, kleurstops en gradient-type het resultaat in real time veranderen.
Veelgestelde vragen
Is deze CSS gradient generator gratis?
Ja - 100% gratis, geen account, geen watermerken, geen limieten. Maak zoveel gradients als je wilt en kopieer de CSS zo naar je project.
Wordt er iets geupload naar een server?
Nee. De gradient wordt volledig in je browser gebouwd en getoond met gewone JavaScript. Er worden geen kleuren, code of gebruiksgegevens ergens naartoe gestuurd.
Wat is het verschil tussen linear, radial en conic gradients?
Een linear gradient mengt kleuren langs een rechte lijn onder een hoek die je zelf kiest. Een radial gradient straalt vanuit een middelpunt naar buiten, als cirkel of ellips. Een conic gradient laat kleuren rond een middelpunt draaien, zoals een kleurenwiel of taartdiagram.
Hoe werken kleurstops in CSS gradients?
Elke stop koppelt een kleur aan een positie tussen 0% en 100% langs de gradient-lijn. De browser mengt vloeiend tussen naburige stops. Zet je twee stops op dezelfde positie, dan ontstaat een harde rand in plaats van een overgang - handig voor strepen en taartdiagram-effecten.
Welke browsers ondersteunen deze gradients?
Alle moderne browsers - Chrome, Firefox, Safari en Edge - ondersteunen linear-gradient() en radial-gradient() zonder prefix; conic-gradient() wordt overal ondersteund sinds 2020. De gekopieerde code bevat ook een fallback met effen kleur voor oudere browsers.
Kan ik de gegenereerde gradient gebruiken als tekstkleur?
Niet direct - gradients zijn afbeeldingen, geen kleuren. Pas de gradient toe als background-image op het tekstelement en voeg background-clip: text en color: transparent toe, zodat de gradient door de letters heen zichtbaar wordt.
Waarom vertoont mijn gradient banding?
Banding ontstaat wanneer twee ver uit elkaar liggende stops overgaan over een lang traject van vergelijkbare tinten, waardoor de 8-bit kleurstappen zichtbaar worden. Los het op door een extra kleurstop toe te voegen, de overgangsafstand te verkorten, of kleuren te kiezen die ook in helderheid verschillen, niet alleen in tint.