CSS-verloopgenerator

Wat is CSS-verloopgenerator?

De CSS-verloopgenerator is een gratis tool in de browser voor webdesigners en front-endontwikkelaars die verlopen visueel willen bouwen in plaats van de syntaxis met de hand te schrijven. Kies lineair, radiaal of conisch — met een optionele herhalende variant — en bewerk vervolgens kleurstops op een versleepbare voorbeeldbalk of in rijen per stop met HEX-kleur- en positievelden. Radiale verlopen bieden cirkel-/ellipsvorm, een groottetrefwoord (closest-side, closest-corner, farthest-side, farthest-corner) en een at X% Y%-midden, terwijl conische een starthoek en midden aannemen. Je kunt meerdere verlooplagen door komma's gescheiden in één achtergrond stapelen, een willekeurig verloop genereren, samengestelde paletvoorinstellingen toepassen, de tint van elke stop draaien en de kant-en-klare background-regel kopiëren.

CSS-verloopgenerator gebruiken

1. Kies het verlooptype — Lineair, Radiaal of Conisch — en zet Herhalend aan in de opties voor een herhalend patroon.
2. Sleep de stops langs de voorbeeldbalk om ze te verplaatsen, klik op een lege plek op de balk om een stop toe te voegen, of dubbelklik op een stop om die te verwijderen.
3. Verfijn elke stop met de HEX-kleur- en positievelden, of gebruik de pipet (waar ondersteund) om een kleur van je scherm te nemen.
4. Stel voor radiale verlopen de vorm (cirkel of ellips), een groottetrefwoord en het midden X/Y in; voor conische de starthoek en het midden.
5. Voeg meer lagen toe om verlopen in één achtergrond te stapelen, probeer Willekeurig, pas een palet toe of draai alle tinten in één keer.
6. Kopieer de gegenereerde CSS-background-regel en plak die in je stylesheet.

Voorbeelden

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

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

Radiaal, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Laag 1 lineair 90deg; Laag 2 radiaal circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Veelgestelde vragen

Welke verlooptypen en opties worden ondersteund?

Lineaire, radiale en conische verlopen, elk met een optionele herhalende variant. Radiaal voegt cirkel-/ellipsvorm toe, een groottetrefwoord (closest-side, closest-corner, farthest-side, farthest-corner) en een at X% Y%-midden; conisch voegt een starthoek en midden toe. Je kunt ook meerdere lagen in één achtergrond stapelen.

Hoe werkt de versleepbare stopbalk?

Sleep een stop langs de balk om de positie te wijzigen, klik op een leeg deel van de balk om een nieuwe stop met geïnterpoleerde kleur in te voegen, en dubbelklik op een stop om die te verwijderen (er blijven minimaal twee over). Elke stop heeft ook HEX-kleur- en positievelden onder de balk.

Kan ik een kleur van mijn scherm nemen?

Ja, in browsers die de EyeDropper-API ondersteunen. Indien beschikbaar verschijnt er naast elke stop een pipetknop; klik erop en kies een willekeurige pixel op het scherm. Je kunt altijd een HEX-waarde typen of het native kleurvakje gebruiken.

Wat doen Willekeurig, de paletten en tint draaien?

Willekeurig vervangt de actieve laag door een nieuw willekeurig verloop, de paletten wisselen de stops van de actieve laag voor een samengestelde kleurenset, en Tint draaien verschuift de tint van elke stop in elke laag in één keer. Ze wijzigen het verloop alleen wanneer je erop klikt.

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é.