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
Less CSS-muotoon -muunnin
Muunna Less-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
CSS3-siirtymägeneraattori
Sujuva peittävyyden siirtyminen
Kynän muunnos CSS-muotoon
Muunna SCSS-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
Tehoyksikkömuunnin
Muunna eri tehoyksiköiden välillä tarkasti teknisiin ja tieteellisiin tarpeisiisi
HMAC-generaattori
Luo HMAC-tiivistelmiä helposti
Tahdin muunnin
Muunna juoksuvauhti helposti eri yksiköiden välillä ja laske arvioitu aika ja matka