▤

CSS Gradient Generator

Bouw een lineaire of radiale gradient met live voorbeeld en kopieer de CSS.

Je bestanden blijven op dit apparaat

Bestanden worden in je browser verwerkt, nooit geüpload. De site downloadt de benodigde code en bestanden. Geen accounts of trackers.

Gebruik Downloaden om deze tool als één HTML-bestand op te slaan voor offline gebruik.

Privacy →

Type

Hoek (90°)

Kleur 1 Positie 1 (0%)

Kleur 2 Positie 2 (100%)

uitvoer

Probeer een uitgewerkt voorbeeld

Voorbeeld

Kies het lineaire type, zet de hoek op 135 en de kleuren op #ff7e5f en #feb47b. De CSS is background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Zet je het eerste punt op 20, dan blijft de eerste kleur effen over de eerste 20% van het vak.

Goed om te weten

0deg wijst omhoog en 90deg naar rechts, dus 135deg loopt van linksboven naar rechtsonder. Staat er tekst op een verloop, controleer dan het contrast met beide eindkleuren.

Over deze tool

Maak een lineaire of radiale gradient met twee kleuren door kleuren, posities en een hoek te kiezen, en kopieer vervolgens de background-regel. Het live voorbeeld draait volledig in je browser.

Veelgestelde vragen

Wat is de hoek in een lineaire gradient?

De hoek bepaalt de richting van de kleurovergang: 0° wijst naar boven, 90° naar rechts, 180° naar beneden, enzovoort.

Wanneer gebruik ik radiaal in plaats van lineair?

Gebruik radiaal om kleuren vanuit een middelpunt naar buiten te laten stralen (zoals een spotlight); lineair mengt ze langs een rechte lijn.