Gratis CSS-gradatiengenerator — Maak lineaire, radiale en conische gradaties

Ontwerp prachtige CSS-gradaties met deze gratis online gradatiengenerator. Kies uit lineaire, radiale en conische gradatievormen, pas kleuren en hoeken aan en kopieer de CSS-code direct.

Wat is een CSS-gradatie?

Een CSS-gradatie is een vloeiende overgang tussen twee of meer kleuren, gemaakt met de background-eigenschap in CSS. Gradaties elimineren het behoefte aan afbeeldingsbestanden, waardoor paginalaadtijden worden verlaagd en volledig responsieve, resolutie-onafhankelijke achtergronden mogelijk worden.

Er zijn drie hoofdtypes CSS-gradaties:

Lineaire gradaties overgaan van kleur langs een rechte lijn, gedefinieerd door een hoek of richting.
Radiale gradaties stralen vanuit een centrum naar buiten, waardoor cirkelvormige of ellipsvormige patronen ontstaan.
Conische gradaties overgaan van kleur rond een centrum in een draaiende beweging, vergelijkbaar met een kleurwiel.

Hoe gebruik je deze gradatiengenerator

Kies een gradatietype — Selecteer Lineair, Radiaal of Conisch bovenaan in het controlepaneel.
Stel de richting in — Voor lineaire en conische gradaties, pas de hoek aan met de schuifregelaar of snelkeuzeknoppen.
Pas radiale opties aan — Voor radiale gradaties, kies een vorm (cirkel of ellips) en een grootte.
Bewerk kleurstoppen — Klik op de kleurkiezer om de kleur van elke stop te wijzigen. Sleep de positie-schuifregelaar om aan te passen waar elke kleur verschijnt.
Voeg of verwijder kleuren toe — Gebruik de "Kleur toevoegen"-knop om meer stops toe te voegen (maximaal 8), of klik op X om een stop te verwijderen (minimaal 2).
Probeer een voorinstelling — Klik op een voorinstellingsswatch om een vooraf gemaakte gradatie te laden.
Kopieer de CSS — Klik op "CSS kopiëren" om de volledige background-eigenschap naar je klembord te kopiëren.

Belangrijke functies

Functie	Voordeel
Drie gradatietypen	Lineair, radiaal en conisch — alle CSS-gradatiemodes worden ondersteund
Live voorvertoning	Zie je gradatie real-time bij het aanpassen van instellingen
Tot 8 kleurstoppen	Maak complexe meerkleurige gradaties met nauwkeurige positieering
Hoekcontrole	Schuifregelaar + snelkeuzeknoppen voor veelvoorkomende hoeken (0°–315°)
Radiale vorm & grootte	Cirkel/ellipsvormen met vier CSS-grootte-woorden
Eén-klik voorinstellingen	Zes gecurateerde gradatievoorinstellingen om snel te beginnen
Kopieer CSS-code	Één klik om productie-klare CSS naar je klembord te kopiëren
Geen gegevens verzonden	Alles draait in je browser — geen server, geen tracking

Vergelijking van gradatietypen

Eigenschap	Lineair	Radiaal	Conisch
Richting	Hoek (0–360°)	Vorm + grootte-woord	Startingshoek
Patroon	Rechte lijn	Cirkel of ellips vanuit het centrum	Draaiende beweging
Beste voor	Achtergronden, banners, knoppen	Spotlight, orbs, abstracte kunst	Piekdiagrammen, kleurwiel, klokken
CSS-functie	`linear-gradient()`	`radial-gradient()`	`conic-gradient()`

Real-world use cases

Websiteachtergronden

Vervang vlakke kleuren met subtile gradaties voor moderne, professionele pagina's. Een zachte 135° lineaire gradatie met twee dichte kleuren voegt diepte toe zonder afleiding.

Knoppen en CTA's

Maak call-to-action-knoppen opvallend met levendige gradaties. Gebruik een 180° (boven- naar onder) gradatie voor een natuurlijke licht- naar schaduw-effect.

Hero-secties

Creëer opvallende hero-banners met duidelijke meerkleurige gradaties. Combineer drie of meer kleuren voor een unieke merklook.

Overlay's en kaarten

Pas semi-transparante gradaties toe op afbeeldingen om tekstleesbaarheid te waarborgen terwijl visuele interesse behouden blijft.

Datavisualisatie

Gebruik conische gradaties om eenvoudige piecharts, voortgangsrings of kleurwiel te maken zonder JavaScript of SVG.

Tips voor betere gradaties

Beperk tot 2–3 kleuren voor schone, professionele ontwerpen. Meer stops kunnen werken maar vereisen zorgvuldige afstemming.
Gebruik vergelijkbare tinten voor subtile gradaties (bijv. lichtblauw naar donkerblauw) en complementaire kleuren voor duidelijke gradaties.
Pas je hoek aan aan de lay-out — 180° werkt goed voor verticale secties, 90° voor horizontale balken.
Test op donkere en lichte thema's — Een gradatie die goed werkt op een wit achtergrond kan aangepast moeten worden voor donkere modus.
Gebruik background-size en background-repeat om kleine gradaties in patronen te tilen.
Combineer met transparantie — Gebruik rgba()-kleuren om gradaties te maken die met onderliggend content samenvallen.

Begrijpen van CSS-gradatiesyntaxis

Een basis lineaire gradatie:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Een radiale gradatie met vorm en grootte:

background: radial-gradient(circle farthest-corner, #667eea 0%, #764ba2 100%);

Een conische gradatie:

background: conic-gradient(from 0deg, #667eea 0%, #764ba2 50%, #667eea 100%);

Alle moderne browsers ondersteunen deze gradatietypen zonder vendor-prefixen.

Veelgestelde vragen

Hoeveel kleuren kan ik gebruiken in een CSS-gradatie?

CSS ondersteunt een willekeurig aantal kleurstoppen. Dit hulpmiddel toestaat tot 8 voor praktisch gebruik. In echte projecten zijn 2–4 stops het meest gebruikelijk.

Wat is het verschil tussen lineaire en radiale gradaties?

Lineaire gradaties overgaan van kleur langs een rechte lijn op een bepaalde hoek. Radiale gradaties overgaan van kleur vanuit een centrum in een cirkelvorm of ellipsvorm.

Werken CSS-gradaties in alle browsers?

Ja. Alle moderne browsers (Chrome, Firefox, Safari, Edge) ondersteunen volledig linear-gradient, radial-gradient en conic-gradient zonder vendor-prefixen.

Kan ik CSS-gradaties animeren?

CSS kan niet direct animeren tussen gradatie-waarden met transitions. Je kunt wel de positie van de gradatie animeren met background-position of CSS @property gebruiken voor aangepaste eigenschapsanimaties in ondersteunende browsers.

Hoe maak ik een gradatie transparant?

Gebruik rgba() of hsla() kleurwaarden met een alfadeel. Bijvoorbeeld, rgba(102, 126, 234, 0.5) geeft je een halfdoorzichtige versie van de kleur.

Bewaart dit hulpmiddel mijn gradatiegegevens?

Nee. Alle gradatiegeneratie gebeurt volledig in je browser. Er wordt geen gegevens naar een server verzonden.

Gradient Generator