CSS-liukuväritekstin luontityökalu
Luo tekstille liukuvärityylejä, tarkastele niitä reaaliaikaisesti ja kopioi CSS.
Tämä työkalu käsittelee kaikki tiedot paikallisesti laitteellasi.
Syöte
Liukuväri
deg
Typografia
px
Tuloste
Esikatselu
100%
CSS-koodi
Lue lisää
Miten liukuvärjätty teksti toimii CSS:ssä?
CSS:ssä ei ole ”tekstiliukuväri”-ominaisuutta. Tavallinen keino on käyttää liukuväriä elementin taustana, rajata tausta kirjainten muotoon background-clip: text -määrityksellä ja tehdä tekstin täytöstä läpinäkyvä, jotta liukuväri näkyy sen läpi.
Työkalun kuvaus
Kirjoita teksti, valitse alku- ja loppuväri ja aseta kulma. Työkalu näyttää reaaliaikaisen esikatselun ja antaa kopioitavan CSS-koodin. Voit myös muuttaa kirjasinperhettä, leikkausta ja kokoa, jotta esikatselu vastaa sitä, mitä aiot käyttää sivullasi.
Luotu sääntö näyttää tältä:
.gradient-text {
background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}Todellinen tulos sisältää myös kirjasinasetukset ja rivittymissäännöt.
Ominaisuudet
- Kahden värin lineaarinen liukuväri, jonka kulma on 0–360 astetta
- Kirjasinperheen, leikkauksen ja koon säätimet
- Reaaliaikainen esikatselu, jonka voi viedä kuvana, sekä valmiiksi kopioitava CSS-кoodi
Kommentit
Työkalu-tiedot
Luotu
Viimeksi päivitetty
Tunnisteet
cssgradienttextgeneratortext gradienttypographybackground clipcolordesignstylewebfrontend
Samankaltaiset työkalut
Luo halkaistuja vastavärejä mistä tahansa lähtöväristä: kaksi tai useampia sävyjä tasavälein sen vastavärin ympärille väriympyrässä. Voit säätää värien määrää ja sävyjen välistä kulmaa.
Luo natiivi bash- tai zsh-komento, joka lähettää Wake-on-LAN-taikapaketin Linuxista. Komento käyttää Python 3:a, Perliä tai bashin /dev/udp-toimintoa, joten wakeonlan- tai etherwake-ohjelmaa ei tarvitse asentaa.
Muuta valokuvan perspektiiviä 3D-efektillä tai sovita kuva kylttiin, näyttöön tai seinään vetämällä sen neljää kulmaa. Tarkka perspektiivilaskenta, täysikokoinen lataus ja käyttö selaimessa.
Upota
Upota tämä työkalu mihin tahansa ilmaiseksi. Tarvitsetko apua? Tutustu oppaaseemme.
Vastuuvapauslause
Tämän verkkosivuston tarjoamat työkalut on suunniteltu auttamaan käyttäjiä erilaisten ongelmien ratkaisemisessa. Vaikka pyrimme varmistamaan, että työkalut ovat tarkkoja ja tehokkaita, emme takaa, että minkään työkalun tulos on 100 % tarkka tai virheetön. Työkalujen tuottamat tulokset toimitetaan sellaisina kuin ne ovat, ja niitä tulee käyttää varoen. Suosittelemme, että käyttäjät tarkistavat tärkeät tiedot tai tulokset lisäresurssien tai ammatillisen neuvonnan avulla, sillä emme voi ottaa vastuuta työkalujen käytöstä aiheutuvista seurauksista. Käyttämällä tätä verkkosivustoa hyväksyt ottaa täyden vastuun tulosten tarkkuudesta ja käytöstä.