Luo kauniita CSS-tekstigradientteja vaivattomasti
Luo upeita liukuväritekstitehosteita verkkosivustollesi
Liukuväriohjaimet
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Suositut liukuvärit
Käyttö
Kirjoita teksti Kirjoita
teksti, johon haluat käyttää liukuväriä " Teksti" -syöttökenttään.
Valitse liukuvärin tyyppi
Valitse lineaarinen, säteittäinen tai kartiomainen liukuvärityyppi.
Suunnan tai kulman
Valitse suunta Lineaarisia liukuvärejä varten valitse suunta. Aseta kulma kartiomaisille kaltevuuksille.
Mukauta värejä
Lisää, poista tai säädä väripysähdyksiä ja niiden sijainteja luodaksesi haluamasi liukuvärin.
Kopioi tai tallenna CSS
Kopioi luotu CSS-koodi tai tallenna se CSS-tiedostona käytettäväksi projekteissasi.
Tietoja tekstin liukuväreistä
CSS-tekstin liukuvärien avulla voit käyttää kauniita, monivärisiä liukuvärejä suoraan tekstiin. Tämä vaikutus oli aikoinaan mahdollinen vain kuvilla, mutta moderni CSS tekee siitä yksinkertaisen ja tehokkaan.
Selaimen tuki:Tekstigradientteja tuetaan kaikissa nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge. Vanhemmissa selaimissa, kuten Internet Explorerissa, teksti palaa tasaiseksi.
Käyttövinkkejä:Tekstin liukuvärit toimivat parhaiten lihavoidun tekstin ja suurikontrastisten väriyhdistelmien kanssa. Kokeile erilaisia gradienttityyppejä ja -suuntia halutun vaikutuksen saavuttamiseksi.
Related Tools
CSS3-siirtymägeneraattori
Sujuva peittävyyden siirtyminen
Less CSS-muotoon -muunnin
Muunna Less-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
Sass:sta CSS:ksi muunnin
Muunna Sass-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
Whirlpool Hajautuslaskuri
mukaan Luo Whirlpool-tiivisteitä nopeasti ja helposti
GST-laskuri
Laske tavara- ja palveluvero (GST) helppokäyttöisellä GST-laskurillamme.
SHA3-512 Hajautuslaskuri
Luo SHA3-512-tiivisteitä nopeasti ja helposti