CSS lineair kleurverloop: de complete gids voor linear-gradient()

Een CSS lineair kleurverloop is een afbeelding die de browser langs een rechte lijn tekent en waarbij de ene kleur in de volgende overloopt. Je schrijft het met de functie linear-gradient() en gebruikt het overal waar CSS een afbeelding accepteert, meestal background-image. Het heeft geen bestand nodig, schaalt naar elk formaat zonder te vervagen en kost niets om te downloaden. De kortste bruikbare versie zijn twee kleuren: linear-gradient(#0f172a, #38bdf8) loopt van diep marineblauw bovenaan naar hemelsblauw onderaan.

.hero {
  background-color: #0f172a; /* shown if the gradient fails */
  background-image: linear-gradient(#0f172a, #38bdf8);
}

Deze gids loopt door elk onderdeel van de functie in de volgorde waarin je het tegenkomt. Wil je het bredere beeld van hoe lineaire kleurverlopen zich verhouden tot radiale, conic en mesh-overgangen, begin dan bij de soorten kleurverlopen.

De syntaxis van linear-gradient()

De functie neemt een optionele richting, een optionele kleurinterpolatiemethode en dan een lijst van minstens twee kleurstops. Alles wordt door komma’s gescheiden behalve de richting en de interpolatiemethode, die het eerste argument delen.

De volledige referentie staat op de linear-gradient()-pagina van MDN, die ook de exacte grammatica uit de CSS Images-specificatie documenteert.

Kleurverloophoeken en richtingssleutelwoorden

Hoeken volgen een kompas: 0deg wijst omhoog, 90deg naar rechts, 180deg omlaag en 270deg naar links. Het kleurverloop begint aan de tegenovergestelde kant en reist naar de richting die je geeft, dus 90deg loopt van links naar rechts. Je kunt ook turn, rad of grad schrijven, waarbij 0.25turn gelijk is aan 90deg. De standaard, als je niets opgeeft, is to bottom.

Hoeksleutelwoorden zijn niet hetzelfde als hoeken van 45 graden. to top right kantelt de lijn zo dat de middenkleur precies tussen de andere twee hoeken loopt, wat de vorm van het vak ook is. Op een brede banner is die lijn veel vlakker dan 45deg, dat altijd op 45 graden wijst en de vorm van het vak negeert. Gebruik sleutelwoorden als de overgang de hoeken moet respecteren en hoeken als meerdere elementen van verschillende vorm één richting moeten delen. Meer over richtingen kiezen staat in kleurverloophoeken.

Kleurstops, posities en hints

Stops zonder posities worden gelijkmatig verdeeld, dus drie kleuren zitten op 0%, 50% en 100%. Geef een stop een positie in procenten of een lengte om hem te verplaatsen. Geef hem twee posities en de kleur blijft effen ertussen. Zet een los percentage tussen twee stops en het wordt een hint: het punt waar de overgang zijn halve kleur bereikt, waardoor de ene kant van de overgang sneller gaat dan de andere.

/* even spacing */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff);

/* a hint: the midpoint arrives early, at 20% */
background-image: linear-gradient(90deg, #0c4a6e, 20%, #22d3ee);

/* two positions: cyan holds solid from 35% to 65% */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff);

Harde stops voor strepen en splitsingen

Als twee stops een positie delen, is er geen ruimte om te mengen, dus krijg je een scherpe rand. Browsers zetten ook een stop vast die eerder komt dan de vorige, wat een handige sluiproute geeft: #f97316 50%, #1e293b 0 betekent dat de tweede kleur precies begint waar de eerste eindigt. Herhaal het idee met repeating-linear-gradient() en je hebt strepen.

Meerdere kleurverlopen in één achtergrond lagen

background-image accepteert een lijst gescheiden door komma’s en de eerste afbeelding wordt bovenaan geschilderd. Lagen schijnen alleen door elkaar waar ze transparant zijn, dus de bovenste kleurverlopen vervagen meestal naar transparent. Moderne browsers mengen in premultiplied alpha, dus vervagen naar transparent trekt niet langer een grijze tint in de kleur zoals ooit. Combineer lagen met background-size en background-repeat als een laag maar een deel van het vak moet dekken.

.card {
  background-color: #111827;
  background-image:
    /* top: a soft sheen across the upper third */
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 35%),
    /* bottom: the colour itself */
    linear-gradient(135deg, #312e81, #7c3aed 55%, #db2777);
}

Stapelen is ook de basis van rijkere effecten: gelaagde radiale gloeden maken een mesh gradient in CSS, en een dunne ruislaag erbovenop verbergt trapvorming, zoals uitgelegd in kleurverloopbanding.

Vloeiender overgangen met kleurinterpolatie

Als elke kleur in een verouderd formaat als hex, rgb() of hsl() is geschreven, mengt de browser in sRGB voor achterwaartse compatibiliteit. sRGB-overgangen tussen verre tinten gaan door doffe, grijzige middens: blauw naar geel is het klassieke geval. in oklab of in oklch toevoegen vraagt om een perceptuele kleurruimte, die het midden lichter en gelijkmatiger houdt. De speciale gids over OKLCH-kleurverlopen in CSS behandelt tintrichtingen en terugvallen.

Browserondersteuning en terugvallen

linear-gradient() werkt zonder voorvoegsel in elke huidige browser, dus de oude -webkit--versies kunnen weg. Interpolatiemethoden, stops met twee posities en hints zijn nieuwer; kijk op caniuse voor de details. Het veiligste patroon is eerst een vlakke background-color, dan het kleurverloop, dan een verbeterde versie in een latere declaratie, die oudere browsers overslaan omdat ze hem niet kunnen lezen.

.banner {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #f59e0b);
  /* browsers that understand interpolation methods use this line */
  background-image: linear-gradient(90deg in oklch, #1e3a8a, #f59e0b);
}

Begin je liever bij een overgang die al karakter heeft dan stops met de hand te tunen, dan bespaart een kleurverloopgenerator of een bibliotheek met kant-en-klare achtergronden tijd. Hoe dan ook, houd de code: een kleurverloop in CSS blijft op elk formaat scherp en weegt een paar bytes.