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.
SCSS:stä CSS:ksi muunnin
Muunna SCSS-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
Sass:sta CSS:ksi muunnin
Muunna Sass-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.
HEX CMYK:ksi
Muunna HEX-värikoodit CMYK-muotoon tulostussovelluksiin
MD6-hajautusgeneraattori
Luo MD6-tiivisteitä nopeasti ja helposti
Oktaali desimaaliksi
Muunna oktaaliluvut desimaaliluvuiksi vaivattomasti