CSS gradient generator
Bouw een verloop op het oog en kopieer de CSS.
Sleep een handgreep om een stop te verplaatsen, of klik op de balk om er een toe te voegen. Handgrepen bewegen ook met de pijltjestoetsen.
Kleurstops
- %
- %
- %
Draait in je browser. Niets van wat je typt wordt ergens naartoe gestuurd.
- Sleep om stops te plaatsen
- Lineair, radiaal en conisch
- 8 kant-en-klare presets
Zo maak je een CSS-verloop
- Kies een preset, of stel de kleur van elke stop in.
- Sleep de handgrepen op de balk, en klik op de balk om een stop toe te voegen.
- Kopieer de CSS en plak hem in je stylesheet.
Soorten verlopen vergeleken
| Type | Hoe het zich verspreidt | CSS-functie |
|---|---|---|
| Lineair | Langs een rechte lijn onder een hoek | linear-gradient() |
| Radiaal | Vanuit een middelpunt naar buiten | radial-gradient() |
| Conisch | Rond een middelpunt, zoals een kleurenwiel | conic-gradient() |
Browserondersteuning per type verloop
| Type verloop | Nodig heeft minstens |
|---|---|
| Lineair en radiaal | Elke actuele browser, tot en met IE10 met een prefix |
| Conisch | Chrome 69, Firefox 83, Safari 12.1 |
De CSS die deze pagina geeft begint altijd eerst met een gewone background-color-regel, zodat een browser die het verloop niet kan tekenen toch de kleur van de eerste stop toont in plaats van een lege vlek.
Tips voor vloeiendere verlopen
- Voeg een derde stop in het midden toe zodat het verloop leest als twee kleuren die via een derde in elkaar overvloeien, in plaats van een vlakke overgang tussen twee tinten.
- Voor een harde overgang in plaats van een vloeiende, geef je twee naast elkaar liggende stops dezelfde positie.
- 0deg loopt van onder naar boven en 90deg van links naar rechts. Tel 180 op bij elke hoek om de richting van een verloop om te keren zonder elke stop opnieuw te typen.
- Kies de radiale vorm die bij de box past: cirkel voor vierkante elementen, ellips voor brede, zodat het verloop niet uitgerekt oogt.
Veelgestelde vragen over CSS gradient generator
Hoe maak ik een verloop in CSS?
Zet de background-eigenschap op een gradient-functie, zoals background: linear-gradient(90deg, #ff7e5f, #feb47b). De eerste waarde is de richting, daarna komen de kleuren, elk met een optionele positie.
Wat is het verschil tussen lineaire, radiale en conische verlopen?
Een lineair verloop verandert van kleur langs een rechte lijn, een radiaal verloop straalt uit vanaf een middelpunt, en een conisch verloop draait rond een middelpunt zoals een kleurenwiel of een taartdiagram.
Welke kant op wijst de hoek?
0deg loopt van onder naar boven, 90deg van links naar rechts, 180deg van boven naar onder en 270deg van rechts naar links. Bij conische verlopen bepaalt de hoek waar de draai begint.
Hoe krijg ik een harde lijn tussen twee kleuren?
Geef twee naast elkaar liggende stops dezelfde positie, zoals rood 50% en blauw 50%. De kleur wisselt dan op dat punt in plaats van te vervloeien.
Werken CSS-verlopen in elke browser?
Lineaire en radiale verlopen werken in elke actuele browser. Conische verlopen hebben Chrome 69, Firefox 83 of Safari 12.1 of nieuwer nodig. De CSS hier begint met een effen kleur als terugval.
Kan ik een CSS-verloop animeren?
Je kunt background-position of background-size animeren op een te groot verloop voor een bewegend effect. De stopkleuren zelf animeren vereist de CSS @property-regel of een klein script, omdat browsers niet zelf tussen twee volledige gradient-waarden kunnen overvloeien.
Kan een verloop als tekstkleur worden gebruikt?
Ja. Kopieer de gradient-CSS hier naar een achtergrond, voeg dan background-clip: text en color: transparent toe aan het tekstelement zodat het verloop door de letters heen zichtbaar wordt in plaats van een vlak te vullen.