CSS gradiëntgenerator
Ontwerp CSS achtergrondverlopen zonder de syntaxis te onthouden. Schakel tussen lineaire en radiale typen, stel een hoek in voor lineaire gradiënten (graden) en kies twee kleurstops op 0% en 100%.
Zo maak je een kleurovergang
1. Kies een lineair of radiaal verloop.
2. Voor lineair stelt je de hoek in graden in (0 = van onder naar boven, 90 = van links naar rechts).
3. Voer de begin- en eindkleuren in (HEX).
4. Kopieer de CSS van de resultaatkaart naar je project.
Voorbeelden van gradiënten
Lineaire heldenbanner (135 graden)
Blauwgroen #6F9B96 tot perzikkleurig #E8C4B8 op 135°: een diagonaal die veel voorkomt in de headers van landingspagina's. Gebruik als achtergrond op een sectie over de volledige breedte.
Radiale schijnwerper
Radiaaltype met licht midden en donkere rand — simuleert een vignet: radiaal verloop (cirkel, #fff 0%, #333 100%).
Verticale vervaging (180 graden)
Hoek 180 voor vervaging van boven naar beneden van merkkleur naar wit — handig achter navigatiebalken.
Wanneer gebruik je deze tool
• Wanneer je een prototype van UI-achtergronden maakt en onmiddellijke visuele feedback wilt.
• Wanneer je vergeet of hoek 90 graden links-rechts of boven-onder loopt.
• Wanneer je CSS moet kopiëren en plakken voor CodePen, willekeurige Tailwind-waarden of ontwerpoverdracht.
Kleur stopt in detail
Een stop is kleur plus optionele positie: #ff0000 0%, #0000ff 50%, #00ff00 100%. Browser interpoleert RGB tussen stops. Middenstops creëren gestreepte zonsondergangen of strepen met meerdere merken. Begin hier met twee stops, plak en voeg een derde stop toe in devtools totdat het er goed uitziet.
Veelgestelde vragen
Wat is de CSS-syntaxis voor een lineaire gradiënt?
achtergrond: lineair verloop (hoek, kleur1 0%, kleur2 100%); Hoek is in graden; kleuren zijn haltes langs de lijn.
Hoe werken kleurstops?
Stops markeren waar elke kleur zich op de verlooplijn bevindt. 0% is het begin, 100% het einde. Deze tool repareert twee stops; voeg indien nodig meer toe in je editor.
Lineair versus radiaal?
Lineair mengt zich langs een rechte lijn. Radiaal loopt vanuit een middelpunt naar buiten toe — goed voor cirkels en zachte plekken.
Welke hoekwaarden zijn gebruikelijk?
0 graden naar boven, 90 graden naar rechts, 180 graden naar beneden, 135 graden diagonaal - gebruikelijk voor kaarten en helden.
Wordt er een achtergrond of een achtergrondafbeelding ingesteld?
Uitvoer gebruikt de achtergrondafkorting die geschikt is voor de meeste div's; je kunt opsplitsen in een achtergrondafbeelding als je andere lagen overschrijft.