Kortversjonen
- Fargestopp i gradienter er punktene der en bestemt farge nås, skrevet som en farge etterfulgt av en posisjon, som
#7c3aed 40%. - Stopp uten posisjoner fordeles jevnt, noe som sjelden gir det mest naturlige uttrykket.
- Et fargehint er en enkelt prosentverdi mellom to stopp som flytter midtpunktet i overgangen uten å legge til en farge.
- To stopp på samme posisjon gir en hard kant, slik striper og skarpe bånd lages i CSS.
- Flere mellomliggende stopp som følger en utjevningskurve, fjerner den synlige kanten der en lineær uttoning begynner og slutter.
På denne siden
Fargestopp i gradienter er punktene der gradienten når en bestemt farge. I CSS består hvert stopp av en farge og en valgfri posisjon, som #7c3aed 40%. Nettleseren blander lineært mellom nabostopp. Plasseringen avgjør nesten alt: om overgangen virker myk eller brå, om én farge dominerer, og om øyet ser en skjøt der uttoningen begynner. Å flytte stoppene gir ofte større forbedring enn å endre fargene.
Slik fungerer fargestopp i gradienter
En gradientlinje går fra 0 prosent til 100 prosent. Hvert stopp fester en farge til et punkt på linjen. Utelater du posisjonene, fordeler nettleseren stoppene jevnt, slik at tre farger havner ved 0, 50 og 100 prosent. Mellom hvert par endres fargen med konstant hastighet. Hele syntaksen er dokumentert i MDNs referanse for linear-gradient().
#1e3a8a, #f472b6Dette skjer
#1e3a8a 20%, #f472b6 80%Dette skjer
#1e3a8a, 30%, #f472b6Dette skjer
#1e3a8a 50%, #f472b6 50%Dette skjer
#1e3a8a 0 40%, #f472b6 40% 100%Dette skjer
#1e3a8a 10px, #f472b6 200pxDette skjer
Derfor virker jevnt fordelte stopp kunstige
Ekte lys endres sjelden med jevn hastighet. En solnedgang er stort sett én farge med et smalt overgangsbånd nær horisonten. En skygge har mest mellomtoner med et kort fall langs kanten. Jevn fordeling gir hver farge like stor plass, og ligner dermed et diagram. Bestem hvilken farge som leder, og la den fylle mesteparten av flaten.
Fargehint: flytt midtpunktet
Et fargehint er en enkelt prosentverdi mellom to stopp. Det legger ikke til en farge, men flytter punktet der blandingen er nøyaktig halvveis. Et hint ved 20 prosent betyr at fargen når midtpunktet tidlig. Da kommer den andre fargen raskt og varer lenge. Hint er den enkleste måten å gjøre en gradient med to farger mindre mekanisk på.
Harde stopp til striper og bånd
Når to stopp deler posisjon, er det ingen avstand å blande over, så fargen skifter øyeblikkelig. Slik tegnes striper, delte bakgrunner, fremdriftslinjer og flagg med bare en gradient. Syntaksen med dobbel posisjon, colour start end, gjør koden kortere. Repeterende gradienter bruker samme tanke og gjentar mønsteret, som beskrevet i repeterende lineære gradienter.
Myke stopp: fjern skjøten
En lineær overgang har en synlig start og slutt. Ton et mørkt slør mot gjennomsiktig over et bilde, og du ser ofte en linje der uttoningen begynner. Endringstakten hopper nemlig fra null til full hastighet. Flere mellomliggende stopp langs en utjevningskurve løser dette: fargen endres først langsomt, så raskere, før den roer seg. Dette er særlig nyttig for lag bak tekst og gjennomsiktige 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%);
}En praktisk metode for å plassere stopp
- 1
Velg den ledende fargen
Gi den 50 til 70 prosent av linjen. Den setter stemningen.
- 2
Legg skiftet der blikket skal gå
Plasser det raskeste fargeskiftet nær blikkfanget, ikke automatisk i midten.
- 3
Legg til hint før du legger til farger
Hvis overgangen virker feil, prøv å flytte midtpunktet først. Flere farger gjør den mer komplisert.
- 4
Kontroller midtpunktene
Se på fargen halvveis mellom hvert par. Er den grå, legg til en brofarge eller bland i OKLCH, som forklart i gradientinterpolasjon.
- 5
Gjør lange uttoninger myke
Når noe tones ut mot gjennomsiktig eller ensfarget, legg til mellomliggende stopp så det ikke oppstår en skjøt.
Unngå
- Like stor plass til alle farger
- En ny farge for å løse hvert problem
- Lineær uttoning mot gjennomsiktig bak tekst
- Harde stopp der du ønsket myke overganger
Gjør dette
- Én ledende farge, de andre kommer sent
- Fargehint for å forskyve en overgang
- Myke stopp til slør og uttoninger
- Harde stopp bare til striper og bånd
Vil du se stopp i sin enkleste form, går lineære CSS-gradienter gjennom hele syntaksen. Gradienttyper viser hvordan stopp oppfører seg i radiale og koniske gradienter. I Gradiently styrer en Mark selv blanding og lys i alle størrelser. Dermed kan du designe med en gang og bruke tiden på ordene.
Spørsmål folk stiller
Hva er et fargestopp i en gradient?
Et punkt langs en gradient der en bestemt farge nås. I CSS skrives det som en farge med valgfri posisjon, for eksempel #7c3aed 40%.
Hva skjer hvis jeg ikke angir posisjon for stoppene?
Nettleseren fordeler dem jevnt fra 0 til 100 prosent. Tre farger havner ved 0, 50 og 100 prosent.
Hva er et fargehint i en CSS-gradient?
En enkelt prosentverdi mellom to stopp, som #4c1d95, 25%, #f9a8d4. Den flytter overgangens midtpunkt uten å legge til en farge.
Hvordan lager jeg en hard linje i en CSS-gradient?
Gi to stopp samme posisjon, for eksempel #0f172a 50%, #f8fafc 50%, eller bruk dobbel posisjon: #0f172a 0 50%, #f8fafc 50% 100%.
Hvordan får jeg en gradient til å tones mykt ut mot gjennomsiktig?
Legg til flere mellomliggende stopp der ugjennomsiktigheten følger en kurve med myk inn- og utgang. En enkel uttoning med to stopp får ofte en synlig linje ved starten.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår