Luo kauniita CSS-tekstigradientteja vaivattomasti

Luo upeita liukuväritekstitehosteita verkkosivustollesi

Liukuväriohjaimet

CSS Gradient Teksti
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Suositut liukuvärit

Sunset
linear-gradient(to right, #FF512F, #F09819)
Magic
linear-gradient(to right, #4158D0, #C850C0, #FFCC70)
Ocean
linear-gradient(to right, #0093E9, #80D0C7)
Electric
linear-gradient(to right, #30CFD0, #330867)
Hedelmäsalaatti
linear-gradient(to right, #FA709A, #FEE140)
Neon Glow
linear-gradient(to right, #00DBDE, #FC00FF)

Käyttö

1

Kirjoita teksti Kirjoita

teksti, johon haluat käyttää liukuväriä " Teksti" -syöttökenttään.

2

Valitse liukuvärin tyyppi

Valitse lineaarinen, säteittäinen tai kartiomainen liukuvärityyppi.

3

Suunnan tai kulman

Valitse suunta Lineaarisia liukuvärejä varten valitse suunta. Aseta kulma kartiomaisille kaltevuuksille.

4

Mukauta värejä

Lisää, poista tai säädä väripysähdyksiä ja niiden sijainteja luodaksesi haluamasi liukuvärin.

5

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.

CSS Minifier

Pakkaa ja optimoi CSS-koodisi ammattimaisella tarkkuudella

CSS3-siirtymägeneraattori

Sujuva peittävyyden siirtyminen

Pantone heksaksi

varten Muunna Pantone-värit HEX-arvoiksi web-suunnittelua

Painoyksikkömuunnin

Muunna eri painoyksiköiden välillä tarkasti ruoanlaitto-, kuntoilu- ja yhteiskunnallisten tarpeidesi

Luo kauniita CSS-lataajia

Luo mukautettuja CSS-latausanimaatioita sekunneissa intuitiivisella vedä ja pudota -käyttöliittymällämme. Koodausta ei tarvita!