CSS Gradient Generator

Over deze tool

De CSS Gradient Generator maakt vloeiende veelkleurige gradiënten die u direct in uw CSS kunt plakken. Ondersteunt lineaire (directionele) en radiale (cirkelvormige) gradiënten met elk gewenst aantal kleurstopps.

Kleurstopps definiëren waar elke kleur begint en eindigt langs de gradiëntas. De hoekmschuifregelaar roteert lineaire gradiënten van 0° tot 360°.

Hoe te gebruiken

1. Selecteer het gradiënttype: Lineair of Radiaal.
2. Sleep voor lineaire gradiënten de hoekschuifregelaar om de richting in te stellen.
3. Klik op een kleurstaaltje om het te wijzigen en sleep de schuifregelaar voor de positie.
4. Klik op + Stop toevoegen voor meer stopps. Klik op ✕ om te verwijderen.
5. Klik op Kopiëren om de CSS background-declaratie te kopiëren.

Gebruiksscenario's

Webdesigners maken hero-sectie-achtergronden met CSS-gradiënten in plaats van afbeeldingen. Merkteams genereren gradiëntpaletten die overeenkomen met de bedrijfskleurrichtlijnen. Ontwikkelaars maken prototypes van kaarten, knoppen en overlays.

Veelgestelde vragen

• Wat is het verschil tussen lineaire en radiale gradiënten? — Een lineaire gradiënt gaat over van kleur langs een rechte lijn op een bepaalde hoek. Een radiale gradiënt straalt kleuren uit vanuit een middelpunt.
• Kan ik meer dan twee kleuren gebruiken? — Ja. Klik op + Stop toevoegen om zoveel kleurstopps toe te voegen als u nodig heeft.
• Is de gegenereerde CSS browseroverschrijdend compatibel? — Ja. De functies linear-gradient() en radial-gradient() worden volledig ondersteund in alle moderne browsers zonder leverancierprefixtsen.