CSS Gradient Generator
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Waarom een visuele gradient generator gebruiken?
CSS-verlopen handmatig schrijven is vervelend — de syntaxis van linear-gradient(), radial-gradient() en conic-gradient() met meerdere kleurstops en posities memoriseren is foutgevoelig. Onze visuele generator laat je kleurstops beheren met kleurkiezers en positieschuifregelaars, met een live preview die direct bijwerkt, waardoor het maken van verlopen snel en intuïtief is.
3 verloopsoorten
Lineaire, radiale en conische verlopen, alle ondersteund met specifieke controls voor elk type
Meerkleurige verlopen
Voeg onbeperkte kleurstops toe en sleep hun posities om complexe meerkleurige verlopen te maken
Live preview
Zie je verloop in realtime renderen terwijl je kleuren, posities en hoek aanpast
Een CSS-verloop maken
Kies het verlooptype
Selecteer een lineair, radiaal of conisch verloop en stel de hoek of richting in
Configureer de kleurstops
Gebruik de kleurkiezers om de kleur van elke stop in te stellen en de schuifregelaars om ze te positioneren
CSS kopiëren
Klik op 'CSS kopiëren' voor de volledige background-eigenschap klaar voor je stijlblad
Gebruiksscenario's voor CSS-verlopen
Hero-achtergronden
Maak indrukwekkende volledige pagina-achtergronden met diagonale of radiale verlopen
Tekst met verloop
Pas verlopen toe op tekst met background-clip: text voor opvallende typografische effecten
Verloopranden
Gebruik verlopen met border-image om gekleurde randen op elementen te maken
Afbeeldingsoverlays
Leg verlopen over afbeeldingen om donkere overlays te maken die tekstleesbaarheid mogelijk maken
Best practices voor CSS-verlopen
✓ Gebruik 135deg voor diagonale verlopen
Een hoek van 135 graden creëert een klassieke diagonaal van linksboven naar rechtsonder die natuurlijk en dynamisch aanvoelt — een populaire keuze voor hero-secties.
✓ Houd verlopen subtiel voor UI
Voor UI-elementen (knoppen, kaarten), gebruik zeer subtiele verlopen van dezelfde tint met 10-20% helderheidsverschil om diepte toe te voegen zonder visuele rommel.
✓ Geef een terugvalkleur op
Voeg een effen background-color toe vóór je verloop als terugval: background-color: #6366f1; background: linear-gradient(...).
✓ Animeer de verlooppositie
CSS-verlopen kunnen niet direct worden geanimeerd, maar je kunt background-position op een groter verloop animeren om een vloeiend effect te maken.
❓ Veelgestelde vragen
Wat is het verschil tussen lineaire, radiale en conische verlopen?
Lineaire verlopen gaan over in een rechte lijn op een hoek. Radiale verlopen stralen uit vanuit een middelpunt in cirkels of ellipsen. Conische verlopen draaien rond een middelpunt als een taartdiagram — ideaal voor voortgangsringen en kleurwielen.
Hoe maak je een transparant verloop?
Gebruik transparent als kleurstop: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Dit maakt een verloop van een semi-ondoorzichtige kleur tot volledig transparant — perfect voor afbeeldingsoverlays.
Waarom heeft mijn verloop strepen?
Banding (zichtbare strepen tussen kleuren) verschijnt op schermen van lage kwaliteit of bij overgangen tussen vergelijkbare tinten. Voeg een tussenliggende kleurstop toe in een complementaire tint om de overgang te verzachten.
Kan ik verlopen als randen gebruiken?
Ja, gebruik border-image: linear-gradient(...) 1. Dit stelt het verloop in als randafbeelding. Gebruik als alternatief een ::before pseudo-element met verlooachtergrond en negatieve z-index om verloopranden te simuleren.