Gradient Forgé
Design beautiful CSS3 linear and radial gradients.
Color Stops
Orientation
CSS Output
Quick Presets
Aanbevolen tools
Geselecteerde hulpprogramma's die handig voor je kunnen zijn
CSS-gradiënten visueel maken
Overview
CSS-gradiënten maken vloeiende kleurovergangen voor achtergronden, knoppen en overlays. De gradiëntsyntaxis met de hand schrijven is onhandig. Deze generator laat je kleuren en richting visueel kiezen en levert kant-en-klare CSS, met live preview in je browser.
How to Use (Step by Step)
- 1
Kies kleuren
Voeg twee of meer kleurpunten toe.
- 2
Pas type en hoek aan
Lineair, radiaal of conisch, met de gewenste richting.
- 3
Kopieer de CSS
Plak de gegenereerde background-eigenschap in je stylesheet.
How It Works
Je kiest kleurpunten (stops), hun posities en het gradiënttype — lineair, radiaal of conisch — en de tool bouwt de bijbehorende background-eigenschap. Lineaire lopen in een rechte lijn onder een hoek; radiale stralen vanuit het midden naar buiten. Punten toevoegen en posities aanpassen bepalen de overgang. Je ziet het resultaat live en kopieert de CSS.
When to Use This
Een achtergrondgradiënt maken voor een hero-sectie. Een knop of kaart versieren met een kleurovergang. Een kleurenschema prototypen vóór je het in code vastlegt.
Frequently Asked Questions
Een lineaire loopt onder een hoek in een rechte lijn over; een radiale straalt vanuit een middelpunt naar buiten in een cirkel of ellips.