Siirry sisältöön

CSS Text Shadow -generaattori

Luo CSS text-shadow -tehosteita visuaalisesti reaaliaikaisella esikatselulla. Säädä siirtymiä, sumentamista, väriä ja läpinäkyvyyttä. Lisää useita varjokerroksia. Kopioi CSS-koodi. Ilmainen verkkotyökalu.

Esikatselu

Esimerkkiteksti

CSS-tuloste

 

Mikä on CSS text-shadow?

CSS-ominaisuus text-shadow lisää varjotehosteita tekstiin. Kuten box-shadow, voit lisätä useita varjoja erottamalla ne pilkuilla luodaksesi syvyys- ja hehkutehosteita.

text-shadow-syntaksi

text-shadow: offset-x offset-y blur-radius color;
Toisin kuin box-shadow, text-shadow ei tue arvoja spread tai inset.

Suunnitteluvinkkejä

Hienovaraiset varjot (1-2px siirtymä, matala läpinäkyvyys) lisäävät syvyyttä häiritsemättä. Hehkutehosteet käyttävät 0-siirtymää korkealla sumentamisella ja kirkkaalla värillä. Useat kerrokset voivat luoda neon-, retro- tai 3D-tekstitehosteita.

Tietosuoja

Kaikki tekstivarjojen luonti tapahtuu 100 % selaimessasi. Mitään tietoja ei lähetetä palvelimelle.