CSS Verloopgenerator
Wat is een CSS-verloop?
CSS-verlopen stellen u in staat om vloeiende overgangen tussen twee of meer kleuren weer te geven zonder afbeeldingsbestanden te gebruiken. Ze komen in drie typen: linear-gradient (langs een rechte lijn), radial-gradient (uitstralend vanuit een middelpunt) en conic-gradient (ronddraaiend om een middelpunt). Verlopen worden gebruikt voor achtergronden, knoppen, overlays en decoratieve elementen.
Hoe de CSS Verloopgenerator te gebruiken
-
Kies een voorinstelling uit de stalen of configureer uw eigen verloop.
-
Kies het verlooptype: linear, radial of conic.
-
Pas de hoek (voor linear/conic) of de vorm (voor radial) aan.
-
Bewerk de kleurstops — verander kleuren en posities (0–100%).
-
Voeg kleurstops toe of verwijder ze naar behoefte.
-
Kopieer de CSS en plak deze in uw stijlblad.
Veelgestelde vragen
Hoe maak ik een transparante gradiënt? Gebruik rgba() of hsla() kleurwaarden met een alfakanaal van 0 voor volledige transparantie. Een kleurstop van rgba(0,0,0,0) is bijvoorbeeld volledig transparant zwart, handig voor fade-out overlays op afbeeldingen.
Hoe maak ik een harde kleurstop (geen overgang)? Plaats twee kleurstops op dezelfde positie — een eindigend en een beginnend op dat punt. Red 50%, blauw 50% creëert bijvoorbeeld een onmiddellijke wisseling van rood naar blauw op het middelpunt zonder gradiëntovergang.
Welke browsers ondersteunen conic gradients? Conic gradients worden ondersteund in alle moderne browsers (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Ze worden niet ondersteund in Internet Explorer.
Kan ik meerdere gradiënten op hetzelfde element gebruiken? Ja. CSS background accepteert een door komma's gescheiden lijst van lagen. U kunt gradiënten stapelen, ze combineren met achtergrondafbeeldingen en de positie en grootte van elke laag onafhankelijk beheren.
Keywords: CSS verloopgenerator, lineair verloop, radiaal verloop, conisch verloop, CSS achtergrondgenerator, verloopkleurkiezer, CSS gradiënt tool