CSS linear-gradient: täydellinen opas suoraviivaiseen liukuväriin

CSS:n suoraviivainen liukuväri (linear gradient) on kuva, jonka selain piirtää suoraa viivaa pitkin ja sekoittaa väristä toiseen. Se kirjoitetaan linear-gradient()-funktiolla ja sitä voi käyttää kaikkialla, missä CSS hyväksyy kuvan, useimmiten background-imagessa. Se ei tarvitse tiedostoa, skaalautuu mihin tahansa kokoon sumentumatta eikä maksa mitään ladata. Lyhin hyödyllinen versio on kaksi väriä: linear-gradient(#0f172a, #38bdf8) häipyy syvästä laivastonsinisestä ylhäällä taivaansiniseen alhaalla.

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

Tämä opas käy läpi funktion jokaisen osan siinä järjestyksessä, jossa ne vastaan tulevat. Jos haluat laajemman kuvan siitä, miten suoraviivaiset liukuvärit eroavat säteittäisistä, kartiomaisista ja mesh-sekoituksista, aloita oppaasta liukuvärien tyypit.

linear-gradient()-funktion syntaksi

Funktio ottaa valinnaisen suunnan, valinnaisen värin interpolaatiomenetelmän ja sitten vähintään kahden värikohdan luettelon. Kaikki erotetaan pilkuilla paitsi suunta ja interpolaatiomenetelmä, jotka jakavat ensimmäisen argumentin.

Täydellinen viite löytyy MDN:n linear-gradient()-sivulta, joka dokumentoi myös tarkan kieliopin CSS Images -määrittelystä.

Liukuvärin kulmat ja suuntaavainsanat

Kulmat noudattavat kompassia: 0deg osoittaa ylös, 90deg oikealle, 180deg alas ja 270deg vasemmalle. Liukuväri alkaa vastakkaiselta puolelta ja kulkee kohti antamaasi suuntaa, joten 90deg kulkee vasemmalta oikealle. Voit kirjoittaa myös turn, rad tai grad, jossa 0.25turn vastaa arvoa 90deg. Oletus, kun et anna mitään, on to bottom.

Kulmaavainsanat eivät ole sama asia kuin 45 asteen kulmat. to top right kallistaa viivaa niin, että keskimmäinen väri kulkee täsmälleen kahden muun kulman välistä, laatikon muodosta riippumatta. Leveällä bannerilla viiva on paljon tasaisempi kuin 45deg, joka osoittaa aina 45 asteeseen ja ei välitä laatikon muodosta. Käytä avainsanoja, kun sekoituksen pitää kunnioittaa kulmia, ja kulmia, kun useiden eri muotoisten elementtien pitää jakaa yksi suunta. Suunnan valinnasta on lisää oppaassa liukuvärin kulma.

Värikohdat, paikat ja vihjeet

Ilman paikkaa olevat värikohdat jaetaan tasavälein, joten kolme väriä sijaitsee kohdissa 0 %, 50 % ja 100 %. Anna värikohdalle paikka prosentteina tai pituutena siirtääksesi sitä. Anna kaksi paikkaa, niin väri pysyy tasaisena niiden välillä. Laita yksinäinen prosentti kahden värikohdan väliin, ja siitä tulee vihje: piste, jossa sekoitus saavuttaa puolivälin värinsä, jolloin siirtymän toinen puoli on nopeampi kuin toinen.

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

Kovat pysäytykset raidoille ja jaoille

Kun kaksi värikohtaa jakaa saman paikan, sekoitukselle ei jää tilaa, ja tuloksena on terävä reuna. Selaimet myös korjaavat värikohdan, joka tulee aiemmin kuin edellinen, mikä antaa kätevän oikotien: #f97316 50%, #1e293b 0 tarkoittaa, että toinen väri alkaa täsmälleen siitä, mihin ensimmäinen päättyy. Toista ajatus repeating-linear-gradient()-funktiolla, ja sinulla on raidat.

Useiden liukuvärien kerrostaminen yhteen taustaan

background-image hyväksyy pilkuilla erotetun luettelon, ja ensimmäinen kuva piirretään päälle. Kerrokset näkyvät toistensa läpi vain siellä, missä ne ovat läpinäkyviä, joten ylemmät liukuvärit häipyvät yleensä väriin transparent. Nykyaikaiset selaimet sekoittavat esikerrotulla alfalla, joten häivytys väriin transparent ei enää vedä harmaata sävyä väriin niin kuin ennen. Yhdistä kerrokset background-size- ja background-repeat-ominaisuuksiin, kun kerroksen pitää peittää vain osa laatikosta.

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

Kerrostaminen on myös rikkaampien tehosteiden perusta: kerrostetut säteittäiset hehkut tekevät mesh-liukuvärin CSS:llä, ja ohut kohinakerros päällä piilottaa portaikkoisuuden, kuten selitetään oppaassa liukuvärin banding.

Pehmeämmät sekoitukset värien interpolaatiolla

Kun jokainen väri on kirjoitettu vanhalla muodolla, kuten heksalla, rgb():llä tai hsl():llä, selain sekoittaa sRGB:ssä taaksepäin yhteensopivuuden vuoksi. sRGB-sekoitukset kaukaisten sävyjen välillä kulkevat tylsien, harmahtavien keskikohtien kautta: sinisestä keltaiseen on klassinen tapaus. Lisäämällä in oklab tai in oklch pyydät havainnollista väriavaruutta, joka pitää keskikohdan vaaleampana ja tasaisempana. Oma opas OKLCH-liukuväreistä CSS:ssä käsittelee sävysuunnat ja varavaihtoehdot.

Selaintuki ja varavaihtoehdot

linear-gradient() toimii ilman etuliitettä kaikissa nykyisissä selaimissa, joten vanhat -webkit--versiot voi jättää pois. Interpolaatiomenetelmät, kahden paikan värikohdat ja vihjeet ovat uudempia; tarkista tiedot palvelusta caniuse. Varmin tapa on tasainen background-color ensin, sitten liukuväri ja sitten parannettu versio myöhemmässä määrittelyssä, jonka vanhat selaimet ohittavat, koska eivät osaa jäsentää sitä.

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

Jos haluat mieluummin lähteä sekoituksesta, jolla on jo luonnetta, kuin säätää värikohtia käsin, liukuvärigeneraattori tai valmiiden taustojen kirjasto säästää aikaa. Molemmissa tapauksissa säilytä koodi: CSS-liukuväri pysyy terävänä kaikissa kooissa ja painaa muutaman tavun.