CSS tekstivarjo generaattori
Ilmainen online tekstivarjogeneraattori. Pinoa useita varjokerroksia siirrolla, sumennuksella, värillä ja peittävyydellä, kokeile Neon-, 3D- ja Retro-esiasetuksia ja kopioi CSS heti.
Mitä CSS:n text-shadow-ominaisuus on?
text-shadow lisää varjotehosteita tekstin merkkeihin. Jokainen varjo määritellään vaaka- ja pystysiirrolla, valinnaisella sumennussäteellä ja värillä, ja useita varjoja voi yhdistää yhteen pilkuin eroteltuun arvoon monipuolisten tehosteiden luomiseksi.
Miten useat varjokerrokset toimivat?
Kerrokset piirretään alhaalta ylös julistusjärjestyksessä, joten listan ensimmäinen varjo on päällimmäisenä. Tämä generaattori sallii kerrosten lisäämisen, poistamisen, ottamisen käyttöön ja käytöstä poistamisen, ja jokaisella kerroksella on oma siirtonsa, sumennuksensa, värinsä ja peittävyytensä tehosteiden, kuten Neonin tai 3D:n, pinoamiseen.
Mitä siirto X, siirto Y ja sumennus tarkoittavat?
Siirto X liikuttaa varhoa merkkien vasemmalle tai oikealle, siirto Y ylös tai alas, ja sumennussäde pehmentää reunoja: 0 antaa kovan reunan kuten Retro tai Ääriviiva, suuremmat arvot levittävät väriä hehkuna.
Miten teen neonhehkutehosteen?
Käytä Neon-esiasetusta tai määritä useita kerroksia nollasiirrolla, samalla kirkkaalla värillä ja kasvavilla sumennusarvoilla, esimerkiksi 0 0 3px, 0 0 8px ja 0 0 20px. Pinotut halot muistuttavat neonputken valoa.
Vaikuttaako text-shadow renderöintisuorituskykyyn?
Muutama staattinen kerros on kevyt, mutta teksti, jossa on monta suuresti sumennettua varjoa, on kalliimpi piirtää uudelleen. Raskaat varjot pitkissä kappaleissa tai jatkuva text-shadow-animaatio voi pudottaa ruutuja heikoilla ja mobiililaitteilla; suosi lyhyitä otsikoita, maltillista sumennusta tai animoi peittävyyttä.
Miten teen varjosta osittain läpinäkyvän?
Jokaisella kerroksella on peittävyyden liukusäädin, joka muuntaa valitun värin rgba-muotoon, esimerkiksi rgba(0, 0, 0, 0.5). Osittain läpinäkyvät varjot sulautuvat luontevasti mihin tahansa taustaan, kuten Paperi-esiasetus hyödyntää pehmeässä painoleimasinteessa.
Mikä on ero text-shadowlla ja box-shadowlla?
text-shadow vaikuttaa tekstin merkkimuotoihin eikä sillä ole leviämis- tai sisävarjoarvoja, kun taas box-shadow ympäröi minkä tahansa elementin suorakulmaisen laatikon. Siirron ja sumennuksen syntaksi on yhteinen, mutta ne eivät korvaa toisiaan.
Mitkä selaimet tukevat text-shadowia?
text-shadow toimii kaikissa nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox, Safari, Edge ja Opera, ja se on ollut vakio ilman etuliitettä yli vuosikymmenen. Monikerroksiset varjot toimivat samalla tavalla kaikkialla.
Lähetetäänkö kirjoittamani palvelimelle?
Ei. Esikatseluteksti ja kaikki määrittämäsi kerrokset pysyvät selaimessasi, ja CSS luodaan paikallisesti sivulla. Mitään ei lähetetä verkon kautta, joten työkalu toimii myös offline-tilassa lataamisen jälkeen.
Näin käytät työkalua CSS tekstivarjo generaattori
Suunnittele CSS-tekstivarjoja pinoamalla kerroksia arvaamalla yhtä siirtymää. Jokainen muutos piirtyy suurelle suoratoisto-esikatselutekstille, ja CSS luodaan paikallisesti selaimessasi.
- Kirjoita omat sanasi Esikatseluteksti-kenttään kokeillaksesi tehostetta oikealla tekstillä.
- Kokeile esiasetusta: Neon, Paperi, 3D, Retro, Hehku tai Ääriviiva lataa valmiit kerrokset.
- Säädä jokaisen kerroksen Siirto X, Siirto Y, Sumennus, Väri ja Peittävyys sen liukusäätimillä.
- Käytä Lisää kerros -painiketta lisätäksesi lisää varjoja, poista kerroksen rasti poistaaksesi sen käytöstä, tai poista se roskakorikuvakkeella.
- Kopioi tuotettu text-shadow-sääntö ja liitä se tyylisivullesi.
Neonhehku näyttää parhaalta kolmella tai neljällä samanväräisellä kerroksella ja kasvavalla sumennuksella — pidä siirrot nollassa ja anna sumennuksen tehdä työn.
Aiheeseen liittyvät työkalut
- CSS Box Shadow Generaattori Ilmainen online CSS box-shadow generaattori. Luo kauniita varjoja visuaalisesti säädettävällä siirtymällä, sumennuksella, leviämisellä, värillä ja insetillä. Live-esikatselu ja välitön koodin kopiointi.
- CSS-liukuvärigeneraattori Luo upeita CSS-liukuvärejä visuaalisesti. Luo lineaarisia, radiaalisia ja kartiomaisia liukuvärejä useilla väripysähdysillä, kulmilla ja sijainneilla. Kopioi tuotantovalmis CSS-koodi välittömästi.
- Koristetekstigeneraattori Ilmainen koristetekstigeneraattori 28 Unicode-tyylillä. Luo lihavoitua, kursivoitua, goottilaista ja ympyröityä tekstiä Instagram-bioon, TikTokiin, WhatsAppiin ja pelinimittäin.
- Border-radius Generaattori Ilmainen luova border-radius-generaattori verkossa. Raahaa 8 kahvaa tai valitse blob-pohja luodaksesi orgaanisia CSS-muotoja ja kopioidaksesi koodin heti.
- Värimuunnin Ilmainen online-värimuunnin. Muunna HEX, RGB, HSL, HSV muodot välittömästi visuaalisella valitsimella. 100% yksityinen, toimii selaimessasi.
- CSS easing generaattori Ilmainen online CSS easing generaattori. Raahaa cubic-bezier-ohjauspisteitä interaktiivisella käyrällä, valitse 18 esiasetuksen joukosta, katso jatkuvaa pallon animaatiota ja kopioi ajoitusfunktio heti.
- CSS clip-path generaattori Ilmainen online CSS clip-path generaattori. Suunnittele polygon-, circle-, ellipse- ja inset-muodot raahattavilla pisteillä, live-esikatselulla ja CSS-koodin kopioinnilla yhdellä klikkauksella.
- CSS-kaunistaja Muotoile ja kaunista CSS-koodi välittömästi. Muunna minifioitu CSS luettavaksi koodiksi muokattavilla vaihtoehdoilla.