CodeKitHubMikä tämä työkalu on?
CSS-liukuvärit ovat selaimen värilistasta generoimia kuvia, ei ladattavia tiedostoja — linear-gradient() siirtää värejä suoraa linjaa pitkin tietyssä kulmassa, kun taas radial-gradient() siirtää värejä ulospäin keskipisteestä. Molemmat hyväksyvät kaksi tai useamman värikohdan, joista jokainen voidaan halutessaan kiinnittää tiettyyn kohtaan liukuväriä.
Käsin kirjoitettuna liukuvärit menevät helposti hienovaraisesti pieleen: väärä värikohtien järjestys, puuttuva prosenttiluku tai kulma-arvo väärään suuntaan (CSS-kulmat kulkevat myötäpäivään suunnasta 'to top', toisin kuin matemaattiset kulmat). Tämä työkalu pitää syntaksin poissa tieltä — aseta värit ja sijainnit valitsimilla ja liukusäätimillä, katso esikatselulaatikon päivittyvän reaaliajassa ja kopioi valmis CSS, kun se näyttää oikealta.
Lähde: CSS Images Module Level 3, W3C — spesifikaatio, joka määrittelee linear-gradient()- ja radial-gradient()-syntaksin.
Miksi käyttää sitä?
- Esikatselu päivittyy välittömästi jokaisen väri-, sijainti- ja kulmamuutoksen jälkeen — sivua ei tarvitse ladata uudelleen nähdäkseen tuloksen.
- Vaihda lineaarisen ja säteittäisen liukuvärin välillä yhdellä klikkauksella; kulmasäädin piiloutuu automaattisesti säteittäisille liukuväreille, joihin se ei sovellu.
- Lisää tai poista värikohtia (2–4) sen sijaan, että olisit rajoitettu kiinteään kaksivärisen liukuvärin malliin.
- Jokaisella kohdalla on oma sijaintiliukusäädin, joten kohtien ei tarvitse olla tasavälein.
- Tuottaa valmiin liitettävän CSS:n vakiomuotoisella linear-gradient()/radial-gradient()-syntaksilla.
- Toimii kokonaan selaimessasi — mitään säätämääsi ei ladata minnekään. Ilmainen, ei rekisteröitymistä, toimii mobiilissa.
Käyttöohje
- Valitse liukuvärin tyyppi: lineaarinen tai säteittäinen.
- Lineaarisessa liukuvärissä vedä kulmaliukusäädintä — 90deg kulkee vasemmalta oikealle, 180deg ylhäältä alas, ja niin edelleen.
- Aseta väri ja sijainti kullekin kohdalle; ensimmäinen kohta on liukuvärin aloitusväri, viimeinen sen lopetusväri.
- Klikkaa '+ Lisää kohta' lisätäksesi enintään 4 kohtaa monivärisen liukuvärin tekemiseksi, tai ✕-painiketta poistaaksesi yhden (vähintään 2).
- Kopioi generoitu CSS ja liitä se background- tai background-image-määritykseen.
Esimerkki
Syöte
Lineaarinen · Kulma: 90deg · Kohdat: #f97316 kohdassa 0 %, #ec4899 kohdassa 100 %Tuloste
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Vasemmalta oikealle kulkeva oranssista pinkkiin siirtyvä liukuväri — yleinen tyyli painikkeille, bannereille ja hero-taustoille.
Lineaarinen vs. säteittäinen liukuväri
Lineaarinen liukuväri siirtää väriä suoraa linjaa pitkin, ja sitä ohjaa kulma — hyödyllinen bannereille, painikkeille ja suunnattuille taustoille. Säteittäinen liukuväri siirtää väriä ulospäin keskipisteestä laajenevina renkaina, mikä sopii spotlight-efekteihin, merkkeihin tai hehkuvan näköisiin taustoihin. Tämä työkalu asettaa säteittäisen liukuvärin oletuksena ympyrän muotoon laatikon keskelle, mikä kattaa yleisimmän säteittäisen käyttötapauksen; CSS tukee myös ellipsimuotoja ja epäkeskisiä sijainteja, jos haluat muokata tulosta vielä käsin.
Yleiset liukuvärimallit
- Hienovarainen brändiaksentti: kaksi lähellä toisiaan olevaa sävyä (esim. kaksi saman värin sävyä) loivassa kulmassa pehmeän taustapinnan luomiseksi.
- Kontrastinen CTA-painike: kaksi kylläistä, toisiaan täydentävää väriä kulmassa 90deg tai 135deg rohkean, klikattavan näköisen tuloksen saamiseksi.
- Peittokerros kuvan päällä: liukuväri läpinäkyvästä täyteen väriin (aseta läpinäkyvyys rgba-värillä valitsimen taustalla olevassa hex-arvossa tai säädä kopioinnin jälkeen) background-imagen päällä.
- Monikohtainen sateenkaari-/brändiliukuväri: 3–4 kohtaa jaettuna koko 0–100 %:n alueelle sulavampien ja asteittaisempien siirtymien saamiseksi kuin kaksivärinen liukuväri sallii.
- Säteittäinen spotlight: kirkas keskikohta lähellä 0 % häipyen tummempaan reunakohtaan lähellä 100 %, hyödyllinen hero-osioissa tai korttien korostuksissa.
Yhdistäminen muihin CSS-työkaluihin
Liukuvärejä yhdistetään usein pyöristettyihin kulmiin ja varjoihin samassa elementissä — liukuvärikortti, jossa on pehmeä box-shadow ja pyöristetyt kulmat, on yleinen käyttöliittymämalli. Luo kukin osa erikseen ja yhdistä CSS-määritykset elementissä.
→ Box Shadow -generaattori · Border Radius -generaattori · Värivalitsin
Usein kysytyt kysymykset
Mitä eroa on linear-gradient()- ja radial-gradient()-funktioilla?
linear-gradient() siirtää värejä suoraa linjaa pitkin määritetyssä kulmassa. radial-gradient() siirtää värejä ulospäin keskipisteestä laajenevina muotoina (ympyrä tai ellipsi). Molemmat hyväksyvät samanlaisen pilkuilla erotetun värikohtalistan; vain siirtymän muoto eroaa.
Miten CSS-liukuvärien kulmat toimivat?
CSS-liukuvärien kulmat kulkevat myötäpäivään alkaen suunnasta 'to top' (0deg osoittaa ylös). 90deg osoittaa oikealle, 180deg alas ja 270deg vasemmalle — päinvastainen käytäntö kuin tavallisissa matemaattisissa kulmissa, mikä aiheuttaa usein sekaannusta liukuvärejä käsin kirjoitettaessa.
Voinko käyttää enemmän kuin 4 värikohtaa?
Kyllä — CSS-liukuvärit hyväksyvät minkä tahansa määrän pilkuilla erotettuja värikohtia. Tämä työkalu rajoittaa interaktiivisen rakentajan neljään hallittavan käyttöliittymän vuoksi, mutta voit kopioida generoidun CSS:n ja lisätä käsin lisää pilkuilla erotettuja 'väri sijainti%' -merkintöjä tyylitiedostoosi.
Miksi liukuväristäni tulee raidallinen sulavan sijaan?
Raidallisuus johtuu yleensä väreistä, jotka ovat sävyltään liian kaukana toisistaan liian harvoilla kohdilla niiden välissä, tai selaimen omasta rajallisesta väritarkkuudesta hyvin matalassa kontrastissa. Välikohdan lisääminen sekoitetulla värillä tai lähempänä toisiaan olevien sävyjen valitseminen tuottaa yleensä sulavamman lopputuloksen.
Voinko animoida CSS-liukuväriä?
Ei suoraan — liukuvärit eivät ole luonnostaan animoitavissa samalla tavalla kuin background-position tai transform, koska selaimet eivät osaa interpoloida kahden mielivaltaisen liukuvärimäärityksen välillä. Yleisiä kiertotapoja ovat background-positionin animointi ylimitoitetussa liukuvärissä tai background-colorin siirtymä, jos vain yksi väri muuttuu.