tigtools

CSS-liukuvärigeneraattori

Valitse värit ja sijainnit, valitse liukuvärin tyyppi ja kopioi käyttövalmis CSS.

Toimii selaimessasi Ei rekisteröitymistä

Tyyppi
135°
Väripysäytykset
  1. Pysäytys 1
    #0b5d1e
    0%
    100%
  2. Pysäytys 2
    #f2c14e
    100%
    100%
Liukuvärissä on tässä 2–6 väripysäkkiä.

Käyttöohje

  1. Valitse lineaarinen, radiaalinen tai kartiomainen liukuväri ja aseta sitten kulma tai keskipisteen sijainti.
  2. Aseta kunkin pysäytyksen väri, läpinäkyvyys ja sijainti. Lisää enintään kuusi pysäytystä tai poista ne, joita et tarvitse.
  3. Tarkista esikatselu ja kopioi CSS-rivi tyylisivuusi.

Näin se toimii

Tulos on tavallinen CSS-taustamäärittely. Lineaariset liukuvärit etenevät kulmaa pitkin: 0 astetta kulkee alhaalta ylös, 90 astetta vasemmalta oikealle, 180 astetta ylhäältä alas. Radiaaliset liukuvärit leviävät keskipisteestä ympyränä tai ellipsinä, joka sopii laatikkoon. Kartio-liukuvärit pyyhkäisevät keskipisteen ympäri alkaen valitusta kulmasta, mikä on hyödyllistä piirakkamaisten efektien ja väriympyröiden luomiseen.

Pysäytyskohdat kirjoitetaan sijaintinsa järjestyksessä, joten voit vetää sijainteja vapaasti. Pysäytyskohta, jonka peittävyys on alennettu, kirjoitetaan muodossa rgba(), mikä antaa taustan näkyä läpi. Kaksi pysäytyskohtaa samassa sijainnissa luovat terävän reunan pehmeän sekoituksen sijaan, ja näin raidat tehdään.

Kaikki kolme liukuvärifunktiota toimivat kaikissa nykyisissä selaimissa. Liukuvärit sekoittuvat oletusarvoisesti sRGB-väriavaruudessa, mikä voi näyttää hieman harmaalta täydentävien värien välillä (esimerkiksi sininen ja keltainen); lisäämällä keskelle pysäytyskohdan kirkkaammalla värillä voit välttää tämän.

Esimerkit

Hillitty otsikon tausta

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) antaa pehmeän ylhäältä alas suuntautuvan liukuman, joka pitää tumman tekstin luettavana.

Teräväreunaiset raidat

Käytä neljää pysäytystä: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Kaksi 50 %:n pysäytystä kohtaavat ilman sekoitusta, jolloin syntyy kaksi yhtenäistä puolikasta.

Kohdevalotehoste

Radiaalinen liukuväri (ympyrä vasemmassa yläkulmassa) arvosta rgba(255, 255, 255, 0.6) arvoon rgba(255, 255, 255, 0) värikerroksen päälle asetettuna antaa pehmeän valon nurkkaan.

Usein kysytyt kysymykset

Mihin suuntaan 0deg osoittaa?

CSS:ssä 0deg osoittaa ylös, joten liukuväri alkaa alhaalta ja päättyy ylhäällä. 90deg kulkee vasemmalta oikealle. Tämä eroaa joistakin suunnittelusovelluksista, joissa 0° tarkoittaa usein vasemmalta oikealle.

Voinko käyttää liukuväriä tekstissä?

Kyllä: käytä taustaa ja lisää sitten background-clip: text ja color: transparent. Varmista, että teksti pysyy luettavana sivua vasten liukuvärin jokaisessa kohdassa.

Tarvitsenko selainkohtaisia etuliitteitä, kuten -webkit-linear-gradient?

Ei. Nykyiset selaimet tukevat etuliitteetöntä syntaksia. Etuliitteitä tarvitaan vain monia vuosia vanhoille selaimille.

Tietosuoja

Kaikki luodaan selaimessasi. Värejäsi ja asetuksiasi ei lähetetä eikä tallenneta.