CSS-verloopgenerator
Bouw lineaire of radiale CSS-gradiënten met een livevoorbeeld en kopieer-klaar code.
Snel antwoord: CSS-verloopgenerator: maak lineaire of radiale CSS-verlopen met een livevoorbeeld en direct kopieerbare code. Werkt volledig in je browser, gratis en zonder registratie.
Laatst bijgewerkt
Goed om te weten
The mechanics that trip people up are direction and stop placement. In CSS a linear gradient angle is measured clockwise from the top: 0deg points up, 90deg points right, 180deg down. Radial gradients instead radiate from a center point outward, which makes them ideal for spotlights, soft vignettes and button glows where linear direction would look wrong.
Watch for the gray dead zone. Interpolating between two saturated but complementary hues — say blue to orange — routes the midpoint through a muddy gray in the default sRGB space. Nudging the stops or picking colors closer on the wheel keeps the blend lively; browsers that support in oklch interpolation produce noticeably cleaner transitions for far-apart hues.
For a smooth backdrop, keep contrast low and the angle shallow so banding stays invisible on wide screens; for a punchy accent, push the stops apart and raise the angle. Gradients are also purely decorative to assistive tech, so never rely on one to convey meaning — any text on top still has to clear the WCAG contrast threshold against the darkest part of the blend.
Pair this with a palette workflow: derive harmonious endpoints in the Color Palette Generator, then drop them in here to turn a two-color scheme into a background.
Veelgestelde vragen
- Is de gradientgenerator gratis?
- Ja — gratis zonder registratie.
- Lineair of radiaal?
- Beide — wissel tussen lineaire en radiale gradients met de type-selector.
- Kan ik meer dan twee kleurstops toevoegen?
- De huidige versie ondersteunt twee stops; de resulterende CSS is eenvoudig handmatig uit te breiden als je meer nodig hebt.
- Werkt de output overal?
- Ja — de syntaxis is gewone CSS die door elke browser ondersteund wordt sinds 2014.
- Worden mijn kleuren geüpload?
- Nee — de preview en CSS-generatie draaien volledig in je browser.