CSS-verloopgenerator

Wat is CSS-verloopgenerator?

De CSS-verloopgenerator is een gratis online tool voor webdesigners en front-endontwikkelaars die snel een verloop nodig hebben zonder de syntaxis met de hand te schrijven. Kies een lineair, radiaal of conisch verloop, stel de hoek in graden in voor de lineaire en conische typen, en definieer kleurstops met elk een HEX-kleur en een positiepercentage. Terwijl je bewerkt, toont een livevoorbeeld het resultaat en wordt de bijbehorende CSS-background-regel direct bijgewerkt, zodat je die meteen in een stylesheet kunt kopiëren. Gebruik het om knoppen, hero-achtergronden, kaarten en overlays te ontwerpen, of om te leren hoe de functies linear-gradient(), radial-gradient() en conic-gradient() werken.

CSS-verloopgenerator gebruiken

1. Kies het verlooptype: Lineair, Radiaal of Conisch.
2. Stel voor een lineair of conisch verloop de hoek in graden in (0-360); radiaal gebruikt een gecentreerde cirkel en negeert de hoek.
3. Bewerk elke kleurstop: typ of kies een HEX-kleur en stel de positie in als percentage (0-100).
4. Klik op Stop toevoegen om nog een kleur toe te voegen, of op het prullenbakpictogram om een stop te verwijderen (er blijven minimaal twee stops over).
5. Bekijk hoe het livevoorbeeld bijwerkt en kopieer vervolgens de gegenereerde CSS-background-regel met de kopieerknop.

Voorbeelden

Lineair, 90deg, #4f86f7 op 0% en #9333ea op 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radiaal, stops #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

Veelgestelde vragen

Welke verlooptypen worden ondersteund?

Drie: linear-gradient (met een hoek in graden), radial-gradient (een gecentreerde cirkel) en conic-gradient (met een starthoek). Wissel ertussen met de typeschakelaar en de CSS wordt direct bijgewerkt.

Hoe werken kleurstops en posities?

Elke stop heeft een kleur en een positiepercentage van 0 tot 100. De stops worden in de CSS geschreven in de volgorde waarin ze in de lijst staan, precies zoals de browser ze interpreteert, dus jij bepaalt de volgorde rechtstreeks. Je kunt stops toevoegen met Stop toevoegen en ze verwijderen tot een minimum van twee.

Kan ik kleuren visueel kiezen in plaats van HEX te typen?

Ja. Klik op het kleine kleurvakje naast elke stop om de native kleurkiezer van je browser te openen, of typ een HEX-waarde zoals #4f86f7 rechtstreeks in het kleurveld. Het voorbeeld en de CSS werken bij terwijl je het wijzigt.

Waarom verdwijnt het hoekveld bij radiale verlopen?

Een radiaal verloop wordt hier getekend als een gecentreerde cirkel, die geen hoek gebruikt, dus het hoekveld wordt alleen getoond bij de lineaire en conische typen, waar het de richting verandert.

Worden mijn kleuren of CSS ergens geüpload?

Nee. Het verloop wordt volledig in je browser opgebouwd met lokale tekst- en kleurberekeningen — er worden nooit kleuren, CSS of instellingen naar een server gestuurd, dus het werkt offline en houdt je werk privé.