Siirry sisältöön
helpyself

CSS-liukuvärigeneraattori

Local only — nothing is uploaded unless you save or share it.

CSS-liukuvärigeneraattori lineaariselle, säteittäiselle ja kartiomaiselle — kopioi koodi suoraan.

  1. Valitse liukuvärin laji, ja kulma jos sellainen on
  2. Aseta värisi — lisää pysäkkejä tai sijoita ne käsin
  3. Kopioi CSS
180°
Tallenna tämä työkalu

Pidä CSS-liukuvärigeneraattori käden ulottuvilla

Lisää kirjanmerkkeihin

Tietoa työkalusta

Liukuväri on niitä asioita, jotka on nopeampi rakentaa silmällä kuin kirjoittaa käsin, koska haluamasi luku on harvoin se jonka ensin arvaat. Tämä näyttää tuloksen samalla kun muutat sitä ja ojentaa CSS:n sen alta. Kaikki kolme lajia ovat täällä: lineaarinen tavalliseen vasemmalta oikealle tai ylhäältä alas häivytykseen, säteittäinen keskeltä leviävään hehkuun, ja kartiomainen pisteen ympäri kiertävään pyyhkäisyyn, josta väriympyrät ja piirakkakaaviot on tehty. Voit lisätä niin monta väripysäkkiä kuin haluat ja sijoittaa jokaisen, tai jättää sijainnit tyhjiksi ja antaa selaimen jakaa ne tasan, mikä on lähes joka kerta se mitä haluat ja pitää arvon riittävän lyhyenä muokattavaksi jälkeenpäin. Toistotila muuttaa minkä tahansa niistä laatoittuvaksi kuvioksi, ja juuri niin CSS:ssä tehdään raidat ilman ainuttakaan kuvaa. Jokainen kirjoittamasi väri luetaan ja kirjoitetaan uudelleen sen sijaan että se kopioitaisiin läpi, joten leikepöydällesi päätyvä arvo on väri eikä mitään muuta. Työkalu toimii kokonaan selaimessasi.

Usein kysyttyä

Mikä ero on lineaarisella, säteittäisellä ja kartiomaisella?

Lineaarinen häivyttää suoraa viivaa pitkin, ja sitä useimmat tarkoittavat. Säteittäinen leviää pisteestä ulospäin kuin hehku. Kartiomainen pyyhkäisee pisteen ympäri sen sijaan että lähtisi siitä ulospäin, ja juuri se tekee väriympyrät ja piirakkakaavion lohkot mahdollisiksi pelkällä CSS:llä.

Kannattaako pysäkkien sijainnit asettaa?

Yleensä ei. Tyhjiksi jätettyinä selain jakaa pysäkit tasan, mikä on useimmiten juuri se mitä haluat ja pitää CSS:n lyhyenä ja myöhemmin helposti muokattavana. Aseta ne käsin kun haluat värin pysyvän pidempään tai kun haluat kahden väliin kovan reunan.

Miten teen kovan raidan häivytyksen sijaan?

Anna kahdelle pysäkille sama sijainti. Liukuväri joka menee yhdestä väristä 50 prosentissa toiseen myös 50 prosentissa vaihtuu välittömästi sen sijaan että sekoittuisi. Yhdistä se toistotilaan ja sinulla on raidat ilman yhtäkään kuvatiedostoa.

Miksi värini tuli takaisin hex-koodina?

Jokainen väri luetaan ja kirjoitetaan uudelleen eikä välitetä suoraan läpi. Se pitää tulosteen kelvollisena värinä eikä minään muuna, millä on väliä koska arvo päätyy tyylitiedostoon. Väri jota ei voi ymmärtää hylätään sen sijaan että se otettaisiin äänettömästi mukaan.

Toimivatko liukuvärit kaikissa selaimissa?

Lineaarinen ja säteittäinen ovat toimineet kaikkialla jo vuosia. Kartiomainen on uudempi mutta tuettu kaikissa nykyisissä selaimissa. Jos joudut tukemaan jotain hyvin vanhaa, generaattori näyttää myös tasaisen värin jonka voit asettaa ensin varalle.

Auta parantamaan tätä työkalua

Löysitkö virheen, kaipaatko muutosta vai puuttuuko jokin työkalu?

/gradient-generator

↑↓ liikkuminen · Enter avaa · Esc sulkee