CSS Verloop Generator — Lineair, Radiaal, Conisch Online

Verloop Generator

Hoek: 90°

Kleuren

CSS-code

Verloop Bibliotheek

🌅 Zonsondergang en Opgang

Voorbeeld	Naam
	Warme Zonsondergang
	Paarse Zonsondergang
	Oranje Zonsopgang
	Vuurgloed

🌊 Oceaan en Water

Voorbeeld	Naam
	Diepe Oceaan
	Kalm Water
	Tropische Zee
	Arctisch Blauw

🌲 Natuur en Aarde

Voorbeeld	Naam
	Bosgroen
	Bergzicht
	Woestijnzand
	Lenteweide

🎨 Levendig en Gedurfd

Voorbeeld	Naam
	Neonlichten
	Elektrisch Paars
	Levendige Regenboog
	Cyber Roze

🌸 Zacht en Pastel

Voorbeeld	Naam
	Suikerspin
	Perzikbloesem
	Lavendeldroom
	Frisse Munt

🌃 Donker en Nacht

Voorbeeld	Naam
	Middernachtshemel
	Donkerpaars
	Ruimtezwart
	Stadslichten

Verloop Types

📐 Lineair Verloop

Een lineair verloop creëert een vloeiende kleurovergang langs een rechte lijn. Stel de hoek in van 0° tot 360° en voeg tot 10 kleuren toe.

Syntax:

background: linear-gradient(angle, color1 position%, color2 position%);

Examples:

linear-gradient(90deg, #667eea 0%, #764ba2 100%)
linear-gradient(135deg, #f857a6 0%, #ff5858 100%)
linear-gradient(to right, #ee0979 0%, #ff6a00 100%)

⭕ Radiaal Verloop

Een radiaal verloop creëert een kleurovergang van het midden naar buiten in cirkel- of ellipsvorm.

Syntax:

background: radial-gradient(shape size at position, color1, color2);

Examples:

radial-gradient(circle, #667eea 0%, #764ba2 100%)
radial-gradient(ellipse at center, #f857a6 0%, #ff5858 100%)
radial-gradient(circle at top left, #ee0979 0%, #ff6a00 100%)

Conisch Verloop

Een conisch verloop creëert een kleurovergang rond een centraal punt als een klokwijzer. Perfect voor kleurwielen.

Syntax:

background: conic-gradient(from angle at position, color1, color2);

Examples:

conic-gradient(from 0deg, #667eea, #764ba2, #667eea)
conic-gradient(from 45deg at center, #f857a6 0%, #ff5858 100%)
conic-gradient(from 90deg, red, yellow, green, blue, red)

Gebruiksscenario's

🎨 Web- en App-Design

CSS verlopen worden veel gebruikt in modern webdesign voor achtergronden, knoppen en UI-elementen.

Hero secties met verloop achtergrond
Knoppen met verlopen
Productkaarten
Overlay verlopen op afbeeldingen
Geanimeerde verlopen
Verloop randen

Mobiele UI en Responsief Design

Verlopen werken goed op mobiele apparaten zonder zware afbeeldingsbestanden.

Statusbalken en navigatie
Splash schermen
Voortgangsbalken
Scherm achtergronden
Iconen met verloop
Thematische schermen

🖼️ Grafiek en Datavisualisatie

Verlopen dienen voor het maken van visualisaties en grafieken direct in de browser.

Heatmaps
Grafieken met verlopen
Voortgangsindicatoren
Lijngrafieken
Kleurkiezers
Social media knoppen

Veelgestelde Vragen

Welke browsers ondersteunen CSS verlopen?

Alle moderne browsers: Chrome, Firefox, Safari, Edge, Opera. Lineair en radiaal sinds 2011, conisch sinds 2017.

Zijn vendor prefixes nodig?

Nee, standaard syntax werkt in alle moderne browsers zonder -webkit- of -moz-.

Hoeveel kleuren kan ik toevoegen?

Technisch onbeperkt, maar 2-5 kleuren worden aanbevolen. De generator ondersteunt maximaal 10.

Hoe verander ik de richting?

Met hoek (0-360deg) of sleutelwoorden (to top, to right). De generator heeft een schuifregelaar.

Beïnvloeden verlopen de prestaties?

CSS verlopen zijn zeer efficiënt — gerenderd door de browser zonder HTTP-verzoeken. Veel lichter dan afbeeldingen.

Hoe maak ik een transparant verloop?

Gebruik rgba() of hsla(). Voorbeeld: linear-gradient(90deg, rgba(255,0,0,0.8) 0%, rgba(0,0,255,0.5) 100%)

CSS Verloop Generator — Visuele Editor voor Webdesign

Gratis online CSS verloop generator met visuele editor. Maak lineaire, radiale en conische verlopen met live preview en preset bibliotheek.

CSS Verlopen in Modern Webdesign

De lineaire verloop generator maakt kleurovergangen langs een rechte lijn met instelbare hoek van 0 tot 360 graden. Lineaire verlopen zijn het meest gebruikt voor hero secties en CTA knoppen.

De radiale verloop generator maakt overgangen van het midden naar buiten. Ideaal voor modale achtergronden en decoratieve elementen.

De conische verloop generator maakt overgangen rond een centraal punt. Uitstekend voor kleurwielen en voortgangsindicatoren.

Visuele Editor met Live Preview

De intuïtieve interface vereenvoudigt het maken van complexe verlopen zonder code te schrijven. De live preview wordt direct bijgewerkt bij elke wijziging.

Bibliotheek van Kant-en-klare Verlopen

De preset collectie bevat meer dan 30 professionele verlopen in 6 categorieën. Elk preset wordt met één klik toegepast.

Technische Aspecten van Verlopen

De browserondersteuning is praktisch universeel. Lineair en radiaal sinds 2011, conisch sinds 2017 in 95%+ van de browsers.

De prestaties van CSS verlopen overtreffen achtergrondafbeeldingen aanzienlijk. Gerenderd door de GPU zonder HTTP-verzoeken.

Voordelen van de Online Generator

De snelheid van het maken in de visuele editor is vele malen hoger dan handmatig coderen.

Maak professionele CSS verlopen voor websites en applicaties met onze gratis visuele online editor.

Gerelateerde Tools

Kleurpaletgenerator

Gerelateerde rekenmachines

Kleurenpalet generator

Harmonieuze kleurenschema's voor ontwerp, websites en branding

Openen →

CSS Border Radius Generator

Visuele editor voor het maken van afgeronde hoeken, cirkels en organische vormen met CSS

Openen →

CSS Box Shadow Generator

Visuele schaduw-editor met meerdere lagen en CSS-code export

Openen →

CSS Flexbox Generator

Visuele editor voor het maken van flexibele CSS-layouts met live voorbeeld en codegeneratie

Openen →

Disclaimer: alle berekeningen op deze site zijn bij benadering en worden ter informatie verstrekt. Resultaten kunnen afwijken van werkelijke afhankelijk van individuele omstandigheden, technische specificaties, regio, wetgevingswijzigingen, enz.

Financiële, medische, bouw-, nuts-, automobiel-, wiskundige, educatieve en IT rekenmachines zijn geen professioneel advies en kunnen niet de enige basis zijn voor het nemen van belangrijke beslissingen. Voor nauwkeurige berekeningen en advies raden we aan om gespecialiseerde professionals te raadplegen.

De site administratie draagt geen verantwoordelijkheid voor mogelijke fouten of schade gerelateerd aan het gebruik van berekeningsresultaten.