Kortversionen
- Färgstopp i en gradient är de punkter längs gradienten där en specifik färg nås, skrivna som en färg följd av en position som
#7c3aed 40%. - Stopp utan positioner sprids jämnt, vilket sällan är det mest naturliga valet.
- En färgmittpunkt är en ensam procentsats mellan två stopp som flyttar mittpunkten i deras gradient utan att lägga till en färg.
- Två stopp på samma position skapar en hård kant, vilket är hur ränder och skarpa band görs i CSS.
- Att lägga till flera mellanliggande stopp som följer en easingkurva tar bort den synliga kanten där en linjär tonavklingning börjar och slutar.
På den här sidan
Färgstopp i gradienter är de punkter där en gradient når en specifik färg. I CSS är varje stopp en färg och en valfri position, som #7c3aed 40%, och webbläsaren blandar i en rät linje mellan angränsande stopp. Var du placerar dem avgör nästan allt: om en gradient känns mjuk eller abrupt, om en färg dominerar och om ögat ser en söm där en tonavklingning börjar. Att flytta stopp är ofta en större förbättring än att byta färger.
Så fungerar färgstopp i gradienter
En gradientlinje löper från 0 procent till 100 procent. Varje stopp fäster en färg vid en punkt på den linjen. Utelämnar du positionerna sprider webbläsaren stoppen jämnt, så tre färger hamnar på 0, 50 och 100 procent. Mellan varje par ändras färgen i konstant takt. Hela syntaxen finns dokumenterad i MDN:s referens för linear-gradient().
#1e3a8a, #f472b6Vad som händer
#1e3a8a 20%, #f472b6 80%Vad som händer
#1e3a8a, 30%, #f472b6Vad som händer
#1e3a8a 50%, #f472b6 50%Vad som händer
#1e3a8a 0 40%, #f472b6 40% 100%Vad som händer
#1e3a8a 10px, #f472b6 200pxVad som händer
Varför jämnt fördelade stopp ser konstgjorda ut
Riktigt ljus ändras sällan i jämn takt. En solnedgång är mest en färg med ett smalt band av förändring nära horisonten, och en skugga är mest mellanton med ett kort fall vid kanten. Jämn fördelning ger varje färg lika stor andel, vilket läses som ett diagram. Bestäm vilken färg som leder och låt den hålla det mesta av utrymmet.
Färgmittpunkter: att flytta mitten
En färgmittpunkt är en naken procentsats placerad mellan två stopp. Den lägger inte till en färg, den flyttar punkten där gradienten är exakt halvvägs. En mittpunkt vid 20 procent betyder att färgen når sin mitt tidigt, så den andra färgen anländer snabbt och sedan dröjer sig kvar. Mittpunkter är det billigaste sättet att få en tvåfärgsgradient att kännas mindre mekanisk.
Hårda stopp för ränder och band
När två stopp delar en position finns det inget avstånd att blanda över, så färgen ändras direkt. Det är så ränder, delade bakgrunder, förloppsindikatorer och flaggor ritas med inget annat än en gradient. Syntaxen med dubbel position, färg start slut, gör det kortare att skriva. Upprepande gradienter tar samma idé och lägger den som plattor, vilket tas upp i repeterande linjära gradienter.
Mjukade stopp: ta bort sömmen
En linjär gradient har en synlig början och ett synligt slut. Tona en mörk mörkläggning till genomskinlig över ett foto och du kan ofta se en linje där tonavklingningen börjar, eftersom förändringstakten hoppar från noll till full fart. Att placera flera mellanliggande stopp längs en easingkurva löser det: färgen börjar ändras långsamt, ökar farten och lugnar sig sedan. Det är särskilt användbart för täckningar bakom text och för genomskinliga gradienter.
/* Linear: a visible edge where the fade starts */
.scrim-linear {
background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%);
}
/* Eased: stops follow an ease in out curve, no edge */
.scrim-eased {
background: linear-gradient(180deg,
rgba(10, 12, 20, 0) 40%,
rgba(10, 12, 20, 0.02) 46%,
rgba(10, 12, 20, 0.08) 52%,
rgba(10, 12, 20, 0.18) 58%,
rgba(10, 12, 20, 0.32) 66%,
rgba(10, 12, 20, 0.48) 74%,
rgba(10, 12, 20, 0.62) 82%,
rgba(10, 12, 20, 0.73) 91%,
rgba(10, 12, 20, 0.8) 100%);
}Placera stopp: en praktisk metod
- 1
Välj den ledande färgen
Ge den 50 till 70 procent av linjen. Den sätter stämningen.
- 2
Placera förändringen där blicken ska gå
Lägg den snabbaste färgförändringen nära tyngdpunkten, inte i mitten som standard.
- 3
Lägg till mittpunkter före färger
Om en gradient känns fel, prova att flytta dess mitt först. Extra färger ger extra komplexitet.
- 4
Kontrollera mittpunkterna
Titta på färgen halvvägs mellan varje par. Om den är grå, lägg till en bro eller blanda i OKLCH, som förklaras i gradientinterpolering.
- 5
Mjuka upp långa tonavklingningar
För allt som tonar till genomskinligt eller till en enfärgad yta, lägg till mellanliggande stopp så att det inte blir någon söm.
Undvik
- Varje färg får lika stor andel
- En ny färg läggs till för att lösa varje problem
- Linjära tonavklingningar till genomskinligt bakom text
- Hårda stopp där du menade mjuka gradienter
Gör så här
- En ledande färg, de andra anländer sent
- Färgmittpunkter för att förskjuta en gradient
- Mjukade stopp för mörkläggningar och tonavklingningar
- Hårda stopp bara för ränder och band
Om du vill se stopp i sin enklaste form går CSS linjära gradienter igenom hela syntaxen, och typer av gradienter visar hur stopp beter sig i radiella och koniska gradienter. I Gradiently sköter en Mark sin egen blandning och sitt eget ljus i varje storlek, så du kan börja designa direkt och lägga tiden på orden.
Vanliga frågor
Vad är ett färgstopp i en gradient?
En punkt längs en gradient där en specifik färg nås, skriven i CSS som en färg med en valfri position, som #7c3aed 40%.
Vad händer om jag inte ger stoppen någon position?
Webbläsaren sprider dem jämnt från 0 till 100 procent. Tre färger hamnar på 0, 50 och 100 procent.
Vad är en färgmittpunkt i en CSS-gradient?
En ensam procentsats mellan två stopp, som #4c1d95, 25%, #f9a8d4. Den flyttar gradientens halvvägspunkt utan att lägga till en färg.
Hur gör jag en hård linje i en CSS-gradient?
Ge två stopp samma position, till exempel #0f172a 50%, #f8fafc 50%, eller använd syntaxen med dubbel position #0f172a 0 50%, #f8fafc 50% 100%.
Hur får jag en gradient att tona mjukt till genomskinlig?
Lägg till flera mellanliggande stopp vars opacitet följer en ease in out-kurva. En enkel tonavklingning med två stopp visar ofta en linje där den börjar.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil