Generátor text-shadow CSS
Bezplatný online generátor text-shadow CSS. Vrstvte více stínů s posunem, rozostřením, barvou a neprůhledností, vyzkoušejte předvolby Neon, 3D, Retro a okamžitě zkopírujte CSS.
Co je vlastnost text-shadow v CSS?
text-shadow přidává stínové efekty ke glyfům textu. Každý stín je definován vodorovným posunem, svislým posunem, volitelným poloměrem rozostření a barvou, a více stínů lze zkombinovat v jedné hodnotě oddělené čárkami pro bohaté efekty.
Jak funguje více vrstev stínu?
Vrstvy se kreslí odspodu nahoru v pořadí deklarace, takže první stín v seznamu je nejvýše. Tento generátor umožňuje vrstvy přidávat, odebírat, zapínat a vypínat, každá má vlastní posun, rozostření, barvu a neprůhlednost, takže lze skládat efekty jako Neon nebo 3D.
Co znamenají posun X, posun Y a rozostření?
Posun X posouvá stín vlevo nebo vpravo od glyfů, posun Y nahoru nebo dolů a poloměr rozostření změkčuje hrany: 0 dává tvrdou hranu jako u stylů Retro nebo Obrys, větší hodnoty rozlévají barvu jako záři.
Jak vytvořit neonovou záři?
Použijte předvolbu Neon nebo nastavte více vrstev s nulovým posunem, stejnou sytou barvou a rostoucími hodnotami rozostření, například 0 0 3px, 0 0 8px a 0 0 20px. Vrstvené aury napodobují svit neonové trubice.
Ovlivňuje text-shadow výkon vykreslování?
Několik statických vrstev je levných, ale text s mnoha velkými rozostřenými stíny stojí více při překreslování. Těžké stíny na dlouhých odstavcích nebo neustálá animace text-shadow může způsobovat poklesy snímků na slabších a mobilních zařízeních; volte krátké nadpisy, mírné rozostření nebo animujte průhlednost.
Jak udělat stín poloprůhledný?
Každá vrstva má posuvník neprůhlednosti, který převádí zvolenou barvu na zápis rgba, například rgba(0, 0, 0, 0.5). Poloprůhledné stíny se přirozeně slévají s jakýmkoli pozadím — na tom staví měkký letterpress vzhled předvolba Papír.
Jaký je rozdíl mezi text-shadow a box-shadow?
text-shadow se vztahuje na tvar glyfů textu a nemá hodnoty rozšíření ani vnitřního stínu, zatímco box-shadow obklopuje obdélníkový rámeček libovolného prvku. Syntaxe posunu a rozostření je společná, ale navzájem se nenahrazují.
Které prohlížeče podporují text-shadow?
text-shadow podporují všechny moderní prohlížeče, včetně Chrome, Firefox, Safari, Edge a Opery, a je více než desetiletí stabilní bez prefixů. Vrstvené stíny fungují stejně všude.
Odesílá se to, co napíšu, na server?
Ne. Náhledový text i všechny nastavené vrstvy zůstávají ve vašem prohlížeči a CSS se generuje lokálně na stránce. Po síti se neposílá nic, takže nástroj funguje i offline po načtení.
Jak používat Generátor text-shadow CSS
Navrhujte stíny textu CSS vrstvením vrstev místo hádání jediného posunu. Každá změna se vykresluje na velkém náhledovém textu naživo a CSS se generuje lokálně ve vašem prohlížeči.
- Napište vlastní slova do pole Náhledový text a vyzkoušejte efekt na skutečném textu.
- Vyzkoušejte předvolbu: Neon, Papír, 3D, Retro, Záře nebo Obrys načte hotové vrstvy.
- Nastavte Posun X, Posun Y, Rozostření, Barvu a Neprůhlednost každé vrstvy jejími posuvníky.
- Pomocí Přidat vrstvu naskládejte další stíny, odškrtnutím vrstvy ji deaktivujte, nebo ji smažte ikonou koše.
- Zkopírujte vygenerované pravidlo text-shadow a vložte jej do své šablony stylů.
Neonové záře vypadají nejlépe se třemi nebo čtyřmi vrstvami stejné barvy a rostoucím rozostřením — ponechte posuny na nule a nechte rozostření udělat práci.
Související nástroje
- Generátor CSS Box Shadow Bezplatný online generátor CSS box-shadow. Vizuálně vytvářejte krásné stíny s nastavitelným posunem, rozostřením, šířením, barvou a inset. Živý náhled a okamžité kopírování kódu.
- Generátor CSS gradientů Vytvářejte úžasné CSS gradienty vizuálně. Generujte lineární, radiální a kuželové gradienty s více barevnými zastávkami, úhly a pozicemi. Okamžitě zkopírujte produkčně připravený CSS kód.
- Generátor Ozdobného Písma Bezplatný generátor ozdobného písma se 28 styly Unicode. Vytvořte tučný, kurzívní, gotický text a text v kroužcích pro bio na Instagramu, TikToku, WhatsApp a herní přezdívky.
- Generátor border-radius Bezplatný kreativní generátor border-radius online. Tažením 8 úchopů nebo výběrem tvaru blob vytvoříte organické CSS tvary a okamžitě zkopírujete kód.
- Převodník barev Bezplatný online převodník barev. Okamžitý převod formátů HEX, RGB, HSL, HSV s vizuálním výběrem. 100% soukromí, běží ve vašem prohlížeči.
- Generátor easing CSS Bezplatný online generátor easing CSS. Přetahujte kontrolní body cubic-bezier na interaktivní křivce, vyberte si z 18 předvoleb, sledujte smyčkovou animaci koule a okamžitě zkopírujte časovací funkci.
- Generátor CSS clip-path Bezplatný online generátor CSS clip-path. Navrhujte tvary polygon, circle, ellipse a inset s tažitelnými body, živým náhledem a zkopírováním kódu CSS na jedno kliknutí.
- CSS zkrášlovač Formátujte a zkrášlujte CSS kód okamžitě. Převeďte minifikovaný CSS na čitelný kód s přizpůsobitelnými možnostmi.