Generátor CSS textových efektů

Většina galerií textových efektů v CSS vám nabídne pevně danou předlohu: jednu neonovou záři, jedno 3D vysunutí, berte nebo nechte být. Tento generátor naopak vytváří CSS na základě vašich vlastních parametrů a na textu, který sami napíšete. Vyberte si z přepínače efektů neonovou záři, 3D vysunutí, letterpress/reliéf, obrys nebo gradientovou výplň, upravte ovládací prvky konkrétního efektu a živý náhled i kopírovatelný blok CSS pod ním se aktualizují při každé změně.

Efekt 3D vysunutí stojí za pochopení: pro zvolenou hloubku (počet naskládaných vrstev) a úhel je vrstva i odsazena o i × cos(úhel) vodorovně a i × sin(úhel) svisle. Hodnoty se počítají v JavaScriptu skutečnými trigonometrickými funkcemi – nečtou se z vyhledávací tabulky přednastavených úhlů. Při 45 stupních jsou vodorovné i svislé odsazení každé vrstvy shodné, protože kosinus a sinus 45° mají stejnou hodnotu; otáčejte posuvníkem úhlu a sledujte, jak se celý sloupec vrstev `text-shadow` v reálném čase natáčí kolem písmen, přičemž každá další vrstva se o něco víc ztmaví, aby navodila dojem nasvícené 3D plochy.

Neonová záře skládá čtyři vrstvy `text-shadow` s rostoucím poloměrem rozostření ve vámi zvolené barvě a případně s blikáním: zapněte jej a vygeneruje se `@keyframes` pravidlo s náhodnou sekvencí poklesů průhlednosti, které se živě animuje, a tlačítko pro přemíchání vám umožní vzorek obměnit bez ručního psaní jediného klíčového snímku. Obrysový text používá `-webkit-text-stroke` pro prohlížeče s podporou, plus poctivý osmisměrový `text-shadow` fallback pro ostatní – oba řádky se v kopírovaném CSS objeví i s vysvětlující poznámkou. Gradientová výplň ořízne `linear-gradient` do tvaru textu pomocí `background-clip: text`, což je dnes standardní vlastnost se širokou podporou; starší `-webkit-` prefixovaný řádek zůstává pro starší renderovací jádra.

Vše se vykresluje lokálně ve vašem prohlížeči – žádný text, který napíšete, se nikam neodesílá. Hotový CSS blok včetně `@keyframes` pravidla (pokud ho efekt vyžaduje) si zkopírujte přímo do své šablony stylů.