Tietoa tästä työkalusta
Luo kauniita lineaarisia ja säteittäisiä CSS-gradientteja visuaalisen editorin avulla. Valitse värejä, säädä pysähdyskohtia, muuta suuntaa tai kulmaa ja katso live-esikatselupäivitys reaaliajassa. Kopioi luotu CSS-koodi – mukaan lukien toimittajan etuliitteet vanhemmille selaimille – ja liitä se suoraan tyylitaulukkoosi.
Usein kysytyt kysymykset
- Toimivatko CSS-gradientit kaikissa selaimissa?
- Nykyaikaisia CSS-gradientteja (lineaarinen gradientti, säteittäinen gradientti) tuetaan kaikissa nykyisissä selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge. Työkalu voi valinnaisesti luoda -webkit-etuliitteet vanhemmille selainversioille.
- Voinko luoda monivärisiä liukuvärejä?
- Kyllä. Lisää niin monta väripysäytystä kuin tarvitset. Voit myös säätää kunkin pysähdyksen sijaintia määrittääksesi, missä värit sekoittuvat. Tämä mahdollistaa monimutkaiset sateenkaaren, auringonlaskun tai mukautetut tuotemerkin kaltevuudet.
- Mitä eroa on lineaarisilla ja radiaalisilla gradienteilla?
- Lineaariset liukuvärit siirtävät värejä suoraa linjaa pitkin (ylhäältä alas, vasemmalta oikealle, diagonaalisesti tai missä tahansa kulmassa). Säteittäiset gradientit siirtävät värejä ulospäin keskipisteestä pyöreänä tai elliptisessä muodossa.
- Voinko käyttää gradienttia tekstin taustana?
- Kyllä. Käytä background-clip: tekstiä komennolla -webkit-text-fill-color: läpinäkyvä lisätäksesi liukuvärin tekstiin. Luotu CSS tarjoaa liukuvärimäärityksen – yhdistä se näihin ominaisuuksiin liukuväritekstiä varten.