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
Kynän muunnos CSS-muotoon
Muunna SCSS-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
Less CSS-muotoon -muunnin
Muunna Less-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
CSS3-siirtymägeneraattori
Sujuva peittävyyden siirtyminen
CMYK PANTONEksi
varten Muunna CMYK-väriarvot lähimmiksi Pantone-vastineiksi® tulostussuunnittelua
Heksa desimaaliksi
Muunna heksadesimaaliluvut desimaaliluvuiksi vaivattomasti
CPM-laskuri
Laske mainoskampanjoidesi promillehinta (CPM) helppokäyttöisellä laskurillamme.