CSS-gradiënt-generator

Over CSS-gradiënten

Een CSS-gradiënt is een soepele interpolatie tussen twee of meer kleuren rechtstreeks getekend door de browser — geen afbeelding nodig. Lineaire gradiënten vegen langs een rechte lijn op de hoek die je kiest. Radiale gradiënten vertrekken vanuit een centraal punt en stralen naar buiten. Beide schalen perfect met elke containergrootte en blijven crisp op alle pixeldichtheden, in tegenstelling tot bitmap-achtergronden.

Hoe gebruik je deze generator

Kies een gradiënt-type, en voor lineair pas de hoek aan (0° wijst omhoog, 90° naar rechts, 180° omlaag). Elke rij in Kleurstops heeft een color picker en een positie — sleep de slider, typ een percentage of klik om te bewerken. Voeg tot vijf stops toe, kies een preset om te starten, en kopieer de CSS in één klik om in je stylesheet te plakken.

Design-tips

Twee-stops-gradiënten tussen analoge kleuren (dicht op het kleurenwiel) voelen kalm en modern. Drie-stops-gradiënten met één accent in het midden kunnen rijk voelen maar slaan snel om in modder — houd verzadiging gelijk. Vermijd hoog-contrast-gradiënten achter tekst zonder een volledig gevulde overlay. Voor hero-secties werken zachte diagonale gradiënten op 45° of 135° vaak het beste — vermijd 0°/90° tenzij je expliciet een banding-effect wilt.

Veelgestelde vragen

Hoeveel kleurstops kan ik toevoegen?

Deze tool capt op vijf stops, wat vrijwel elke UI-gradiënt dekt die je ooit zult verzenden. CSS legt zelf geen limiet op, maar voorbij 4–5 stops verlies je meer aan modder dan je wint aan detail.

Waarom ziet mijn lineaire gradiënt er anders uit dan in een andere tool?

Verschillende tools interpreteren de hoek soms anders — de CSS-spec gebruikt 0° als omhoog, 90° als rechts, maar oudere Webkit-syntax gebruikte een andere referentie. De uitvoer hier gebruikt de moderne linear-gradient()-syntax, hetzelfde als wat moderne browsers en design-tools gebruiken.

Kan ik dit voor dark mode gebruiken?

Ja — combineer de gradiënt met @media (prefers-color-scheme: dark) in je CSS en kies een donkerder set stops. Je kunt de gradiënt-declaratie ook in CSS-variabelen wikkelen en de waarden per thema wisselen.

Schaden gradiënten de prestaties?

Op moderne hardware nee — ze worden door de GPU geschilderd net als elke andere achtergrond. Waar je een kost kunt merken is bij enorme volledig-scherm radiale gradiënten geanimeerd op 60fps, of op zeer oude mobiele apparaten.

Kan ik een gradiënt animeren?

CSS animeert background-image niet rechtstreeks, maar je kunt background-position animeren op een oversized gradiënt, of @property met custom properties gebruiken om kleurstops te interpoleren.

Worden radiale gradiënten overal ondersteund?

Ja. linear-gradient() en radial-gradient() zijn al ruim een decennium in elke grote browser ondersteund. De uitvoer hier gebruikt de standaardvorm (geen vendor prefixes) en werkt terug tot Edge 12, Firefox 16, Chrome 26, Safari 7.

CSS-gradiënt-generator