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%. De preview wordt onmiddellijk bijgewerkt; kopieer de volledige achtergrond- of achtergrondafbeeldingsdeclaratie naar je stylesheet. Ondersteunt HEX-kleurinvoer met validatie.
Hoek (°)
Kleur 1
Kleur 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 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.
Wanneer kies je iets anders
• Als je meer dan twee kleurstops nodig heeft, kunt je de gekopieerde CSS handmatig verlengen of een ontwerpapp gebruiken.
• Als je conische (sweep) gradiënten wilt, wordt dit hier niet ondersteund.
• Als je automatische varianten in de donkere modus nodig heeft, kunt je de kleuren afzonderlijk dupliceren en aanpassen.
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.
Lineaire gradiënthoeken
CSS meet hoeken met de klok mee vanaf “omhoog” (0 graden). Dat is anders dan bij de wiskundeles, waar hoeken vaak van rechts beginnen. Als een verloop er verkeerd uitziet, tel dan 90 graden op of trek het af. Gebruik devtools live editing naast deze generator voor fijnafstemming.
Prestaties en terugval
Verlopen zijn GPU-vriendelijk in moderne browsers. Voor zeer oude klanten stelt je een effen terugval in de achtergrondkleur in op de lichtere stopkleur vóór de verlooplijn.
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.
Worden kleuren naar een server verzonden?
Nee. Preview-weergaven lokaal.
Is dit gratis?
Ja. Gebruik hem zonder account.