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.
Teksti desimaalimuotoon
Muunna teksti desimaaliesitykseksi vaivattomasti
Lainalaskuri
Laske lainanmaksut, korkokulut ja lyhennysaikataulut kattavalla lainalaskurillamme.
Force Conversion Tool
Voimamuunnin on kätevä yksikkömuunnostyökalu, jonka avulla voit vaihtaa nopeasti eri voimayksiköiden välillä.