CSS linear-gradient: den kompletta guiden till linear-gradient()

En linjär gradient i CSS är en bild som webbläsaren ritar längs en rak linje och som blandar från en färg till nästa. Du skriver den med funktionen linear-gradient() och använder den överallt där CSS accepterar en bild, oftast background-image. Den behöver ingen fil, skalas till vilken storlek som helst utan att bli suddig och kostar ingenting att ladda ned. Den kortaste användbara versionen är två färger: linear-gradient(#0f172a, #38bdf8) tonar från djupt marinblått upptill till himmelsblått nedtill.

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

Den här guiden går igenom varje del av funktionen i den ordning du möter dem. Om du vill ha den större bilden av hur linjära gradienter förhåller sig till radiella, koniska och mesh-övergångar börjar du med typerna av gradienter.

Syntaxen för linear-gradient()

Funktionen tar en valfri riktning, en valfri metod för färginterpolering och därefter en lista med minst två färgstopp. Allt separeras med kommatecken utom riktningen och interpoleringsmetoden, som delar det första argumentet.

Hela referensen finns på MDN:s sida om linear-gradient(), som också dokumenterar den exakta grammatiken från specifikationen CSS Images.

Gradientvinklar och riktningsnyckelord

Vinklar följer en kompass: 0deg pekar uppåt, 90deg pekar åt höger, 180deg pekar nedåt och 270deg pekar åt vänster. Gradienten börjar på motsatt sida och färdas mot den riktning du anger, så 90deg löper från vänster till höger. Du kan också skriva turn, rad eller grad, där 0.25turn motsvarar 90deg. Standarden, när du inte anger något, är to bottom.

Hörnnyckelord är inte samma sak som vinklar på 45 grader. to top right lutar linjen så att mittfärgen löper exakt mellan de två andra hörnen, oavsett rutans form. På en bred banner är den linjen mycket flackare än 45deg, som alltid pekar i 45 grader och ignorerar rutans form. Använd nyckelord när övergången ska respektera hörnen och vinklar när flera element med olika former måste dela en riktning. Mer om att välja riktningar finns i gradientvinklar.

Färgstopp, positioner och hints

Stopp utan positioner fördelas jämnt, så tre färger hamnar på 0 %, 50 % och 100 %. Ge ett stopp en position i procent eller en längd för att flytta det. Ge det två positioner så håller färgen sig enfärgad mellan dem. Lägg ett ensamt procenttal mellan två stopp så blir det en hint: punkten där övergången når sin halvvägsfärg, vilket gör att ena sidan av övergången går snabbare än den andra.

/* 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);

Hårda stopp för ränder och delningar

När två stopp delar en position finns det inget utrymme för övergång, så du får en skarp kant. Webbläsare låser också ett stopp som kommer tidigare än det föregående, vilket ger en praktisk genväg: #f97316 50%, #1e293b 0 betyder att den andra färgen börjar exakt där den första slutar. Upprepa idén med repeating-linear-gradient() så har du ränder.

Att lägga flera gradienter i lager i en bakgrund

background-image accepterar en kommaseparerad lista, och den första bilden målas överst. Lager syns bara genom varandra där de är genomskinliga, så de övre gradienterna tonar oftast ut till transparent. Moderna webbläsare blandar i förmultiplicerad alfa, så att tona ut till transparent drar inte längre in en grå ton i färgen som det en gång gjorde. Para ihop lager med background-size och background-repeat när ett lager bara ska täcka en del av rutan.

.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);
}

Att stapla är också grunden för rikare effekter: lagerlagda radiella sken bildar en mesh-gradient i CSS, och ett tunt brusskikt överst döljer trappstegen, som förklaras i gradientbanding.

Mjukare övergångar med färginterpolering

När varje färg skrivs i ett äldre format som hex, rgb() eller hsl() blandar webbläsaren i sRGB för bakåtkompatibilitet. sRGB-övergångar mellan avlägsna nyanser passerar trista, gråaktiga mittpartier: blått till gult är det klassiska fallet. Om du lägger till in oklab eller in oklch ber du om ett perceptuellt färgrum, som håller mitten ljusare och jämnare. Den särskilda guiden om OKLCH-gradienter i CSS tar upp nyansriktningar och reservlösningar.

Webbläsarstöd och reservlösningar

linear-gradient() fungerar utan prefix i alla nuvarande webbläsare, så de gamla -webkit--versionerna kan försvinna. Interpoleringsmetoder, stopp med två positioner och hints är nyare, se caniuse för detaljerna. Det säkraste mönstret är en enfärgad background-color först, sedan gradienten och sedan en förbättrad version i en senare deklaration, som äldre webbläsare hoppar över eftersom de inte kan tolka den.

.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);
}

Om du hellre vill utgå från en övergång som redan har karaktär än att finjustera stopp för hand sparar en gradientgenerator eller ett bibliotek med färdiga bakgrunder tid. Behåll under alla omständigheter koden: en gradient i CSS förblir skarp i alla storlekar och väger några få byte.