CSS Verloop Generator
Wat is het CSS Verloop Generator
Met een CSS verloop generator bouw je visueel een lineair of radiaal verloop en kopieer je de exacte CSS. Kies een verlooptype, stel de hoek (lineair) of de vorm en positie (radiaal) in, voeg zoveel kleurstops toe als je nodig hebt en sleep elke stop naar de juiste plek. De preview wordt direct bijgewerkt, en het uitvoerveld toont altijd een kant-en-klare background-declaratie.
Hoe te gebruiken
- Kies Lineair of Radiaal als verlooptype.
- Pas de hoekschuif aan voor lineaire verlopen, of kies een vorm en positie voor radiale.
- Stel de kleur en positie van elke stop in, en voeg er meer toe met de knop Kleurstop toevoegen.
- Kopieer de gegenereerde CSS uit het uitvoerveld en plak deze in je stylesheet.
Wanneer te gebruiken
Bouw je een hero-sectie en heb je een vloeiende achtergrond van blauw naar roze nodig? Stel twee stops in op 0% en 100%, kies een hoek en kopieer background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); direct naar je CSS. Net zo handig voor card-overlays, hover-states van knoppen of een radiale gloed achter een logo, zonder de verloopsyntax handmatig aan te passen in devtools.
Veelgestelde vragen
Wat is het verschil tussen een lineair en radiaal verloop?
Een lineair verloop laat kleuren overgaan langs een rechte lijn onder een vaste hoek, zoals een zonsondergang die van oranje naar paars vervaagt. Een radiaal verloop laat kleuren naar buiten overgaan vanaf een middelpunt in een cirkel of ellips, zoals een schijnwerper of een gloed-effect.
Hoeveel kleurstops kan ik toevoegen?
Zoveel je wilt. Elk verloop heeft minstens twee stops nodig om weer te geven, en je kunt er meer toevoegen met de knop Kleurstop toevoegen om meerkleurige overgangen zoals regenbogen of merkpaletten te maken.
Wat betekent het positiepercentage bij elke stop?
De positie geeft aan waar die kleur zijn volle sterkte bereikt langs het verloop, van 0% (het begin) tot 100% (het einde). Het verplaatsen van een stop verandert waar de kleur domineert en hoe deze mengt met de buren.
Werkt de gegenereerde CSS in alle browsers?
Ja. linear-gradient() en radial-gradient() zijn standaard CSS-functies die door elke moderne browser worden ondersteund, zonder vendor-prefixes.
Kan ik deze tool delen met mijn verloop al ingevuld?
Ja. De URL wordt automatisch bijgewerkt terwijl je je verloop bouwt. Kopieer de link uit de adresbalk of gebruik de Deel-knop, en iedereen die de link opent ziet exact hetzelfde verloop.
Gerelateerde tools
Beeldverhouding Berekenen
Bereken de beeldverhouding, vind de ontbrekende breedte of hoogte en schaal afbeeldingen en video zonder de verhoudingen te vervormen. Gratis.
Barcode Generator
Genereer EAN-13- of Code 128-barcodes online. Voer je nummer of tekst in en download als SVG of PNG. Gratis, geen aanmelding nodig.
Base64 Decoder
Decodeer Base64-strings direct naar platte tekst in je browser. Ondersteunt volledige Unicode-uitvoer inclusief emoji's. Gratis online Base64-decoder.