CSS-gradient generator

Hoe je dit gebruikt CSS-gradient generator

1. Kies het type verloop en de richting.
2. Stel de kleuren en hun posities in.
3. Kopieer de resulterende CSS.

De drie soorten

CSS heeft drie gradientfuncties, elk voor een ander probleem.

linear-gradient loopt in een rechte lijn. Je geeft een hoek op — 0deg loopt van onder naar boven, 90deg van links naar rechts — of een sleutelwoord als "to right".

radial-gradient vertrekt vanuit een punt en breidt zich uit. Handig voor lichtvlekken en zachte vignetten, en je kunt de vorm (circle of ellipse) en de grootte sturen.

conic-gradient draait rond een punt. Daarmee maak je taartdiagrammen, kleurwielen en draaiende randeffecten zonder afbeeldingen.

Alle drie hebben een repeating-variant die het patroon herhaalt, handig voor strepen en texturen, maar met mate te gebruiken.

En alle drie kun je stapelen: meerdere verlopen gescheiden door komma's in background-image, waarbij de eerste bovenop ligt. Een halftransparant verloop over een ander is de gebruikelijke manier om diepte te krijgen.

Het probleem van het grijze midden

Loopt je verloop tussen twee felle kleuren via een doffe kern, dan is dit de reden.

De interpolatie gebeurt standaard in de sRGB-ruimte, en de rechte weg tussen twee ver uit elkaar liggende tinten doorkruist het onverzadigde deel van de kleurruimte.

Het klassieke geval is blauw naar geel: het midden wordt een vuil grijsgroen in plaats van het verwachte groen.

De moderne oplossing is de interpolatieruimte opgeven: linear-gradient(in oklch, blauw, geel). In OKLCH houdt de route de verzadiging vast en is het resultaat veel schoner.

Je kunt er ook "shorter hue" of "longer hue" bij zetten om te bepalen langs welke kant van de kleurencirkel de overgang loopt, wat de tussenliggende tinten volledig verandert.

Heb je oudere browsers nodig, dan is de klassieke oplossing een of twee tussenkleuren met de hand toevoegen om de route af te dwingen.

Banden, prestaties en toegankelijkheid

Drie praktische punten die opduiken zodra het verloop live gaat.

Banding — die zichtbare stroken in zachte, uitgestrekte overgangen — komt door de precisie van 8 bits per kanaal. Je ziet het vooral bij grote verlopen tussen bijna gelijke tinten.

De gebruikelijke oplossing is er een heel subtiele ruistextuur overheen leggen, die de banden visueel breekt. Enorme verlopen tussen bijna identieke kleuren vermijden helpt ook.

Over prestaties: CSS-verlopen renderen prima, maar background-image animeren dwingt een herberekening per frame af. Wil je animeren, verplaats het verloop dan met transform of animeer de achtergrondpositie, niet de kleuren.

En het meest vergeten punt: tekst over een verloop heeft wisselend contrast. Het kan aan de ene kant AA halen en aan de andere kant zakken. Controleer het contrast op het ongunstigste punt, niet alleen in het midden.

Is het verloop puur decoratief, dan is dat genoeg. Staat er tekst overheen, overweeg dan een halftransparant vlak achter die tekst.

Veelgestelde vragen