Verloopgenerator
De CSS gradient generator maakt lineaire, radiale en conische gradiënten van twee of drie kleuren, met een live preview en background-CSS die je direct kunt kopiëren.
Over deze tool
De CSS gradient generator maakt lineaire, radiale en conische gradiënten van twee of drie kleuren, met een live preview en background-CSS die je direct kunt kopiëren.
Zo gebruik je het
- Kies het type gradiënt: lineair, radiaal of conisch.
- Stel de hoek in met de schuifregelaar (0–360°).
- Kies twee kleuren, of vink Use 3 colors aan voor een derde.
- Klik op Copy CSS en plak de background-regel in je stylesheet.
Goed om te weten
- linear-gradient() laat kleuren overlopen langs een rechte lijn die door een hoek wordt bepaald, waarbij 90deg van links naar rechts loopt.
- radial-gradient(circle, …) verspreidt kleuren vanuit het midden naar buiten.
- conic-gradient(from <angle>, …) laat kleuren rond een middelpunt draaien, handig voor taartdiagrammen en kleurencirkels.
- CSS-gradiënten zijn afbeeldingen die de browser tekent, dus ze schalen naar elk formaat zonder extra bestandsgrootte.
- Alle drie de gradiëntfuncties worden ondersteund in elke huidige grote browser.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Hoe maak ik een CSS-gradiënt?
Gebruik een gradiëntfunctie als achtergrond, bijvoorbeeld background: linear-gradient(135deg, #1db954, #0a1628). Deze tool schrijft die regel voor je op basis van de kleuren en hoek die je kiest.
Wat is het verschil tussen lineaire, radiale en conische gradiënten?
Lineaire gradiënten veranderen van kleur langs een lijn, radiale stralen uit vanuit een middelpunt en conische draaien rond een middelpunt zoals de wijzers van een klok.
Kan een gradiënt meer dan twee kleuren hebben?
Ja. CSS-gradiënten accepteren een onbeperkt aantal color stops. Deze generator ondersteunt twee of drie kleuren; je kunt zelf meer stops toevoegen aan de gekopieerde CSS.
Maken CSS-gradiënten een website trager?
Niet merkbaar. Ze worden door de browser getekend en vereisen geen afbeeldingsdownload, dus ze zijn meestal lichter dan afbeeldingsbestanden met een verloop.