⭐ 0
🔍
Текст Изображение PDF и Документи Аудио Музика Електроника Време Полезни програми Валидатори Езотерика Игри

Генератор на CSS текстови ефекти

Въведете собствен текст и вижте на живо как изглежда с неоново сияние, 3D екструзия, релеф, контур и градиентно запълване – параметрите се изчисляват чрез реална математика, а CSS блокът е готов за копиране.

🔒 Обработва се изцяло във вашия браузър - нищо, което въвеждате тук, никога не се качва.

Обработка... 0%

Резултат

Повечето галерии с CSS текстови ефекти предлагат фиксирани заготовки: едно неоново сияние, една 3D екструзия – приемате или оставате без. Този генератор създава CSS от вашите параметри върху текста, който реално въвеждате. Изберете неоново сияние, 3D екструзия, релеф/вдлъбване, контур или градиентно запълване от падащото меню, нагласете съответните контроли и както живият преглед, така и разположеният под него CSS блок за копиране се обновяват при всяка промяна.

3D екструзията заслужава внимание: при избрана дълбочина (брой наслоени пластове) и ъгъл, слой i се отмества хоризонтално с i × cos(ъгъл) и вертикално с i × sin(ъгъл), изчислено в JavaScript с реалните тригонометрични функции – не се чете от справочна таблица с предварително зададени ъгли. При 45 градуса хоризонталното и вертикалното отместване са равни за всеки слой, понеже косинусът и синусът на 45° имат еднаква стойност; завъртете плъзгача за ъгъла и наблюдавайте как цялата поредица от `text-shadow` слоеве се завърта около буквите в реално време, като всеки следващ е малко по-тъмен от предишния, за да симулира осветена 3D повърхност.

Неоновото сияние наслагва четири `text-shadow` слоя с нарастващ радиус на размазване в избрания от вас цвят и предлага незадължително трептене: щом го включите, автоматично се генерира и анимира на живо `@keyframes` правило с рандомизирана последователност от спадове на непрозрачността, а бутон за преразбъркване ви позволява да смените модела, без да пишете нито един ключов кадър ръчно. Очертаният текст прилага `-webkit-text-stroke` за браузъри, които го поддържат, и честен 8-посочен `text-shadow` резервен вариант за тези, които не го поддържат – и двата реда се включват в копирания CSS с пояснение защо. Градиентното запълване изрязва `linear-gradient` по формата на текста чрез `background-clip: text`, вече стандартно свойство с широка поддръжка, като запазва и по-стария префиксен `-webkit-` ред за наследени енджини.

Всичко се визуализира локално в браузъра ви – въведеният от вас текст никога не се изпраща навън. Копирайте готовия CSS блок, включително `@keyframes` правилото, когато ефектът го изисква, направо в стиловия си файл.

Харесва ли ви този инструмент? Смятате ли този продукт за полезен? Виждате ли потенциал в него и искате ли да го подкрепите?

🛡️
Изпълнява се в браузъра

Вашите файлове и данни никога не напускат това устройство. Обработката е изцяло офлайн. 100% сигурност.

Приети формати и правила

  • Пет автентични ефекта – неоново сияние, 3D екструзия, релеф/вдлъбване, контур и градиентно запълване – всеки със собствени контроли за параметрите (цветове, плъзгачи за дълбочина/ъгъл, спирки на градиента).
  • Неоновото сияние включва незадължителна анимация на трептене с рандомизиран `@keyframes` модел на непрозрачност, който можете да преразбъркате без ръчно да пишете CSS.
  • При 3D екструзията дълбочината (брой слоеве) и ъгълът се настройват независимо с влачене; пикселното отместване и прогресивно потъмняващият нюанс на всеки слой се преизчисляват на живо.

Основни предимства

✓ Дълбочината на 3D екструзията се изчислява с реална тригонометрия – отместването на всеки слой е cos(ъгъл) и sin(ъгъл), умножени по разстоянието му, така че промяната на ъгъла завърта цялата екструзия точно както би изглеждало истинско 3D буквено лого.
✓ Всеки ефект се визуализира върху текста, който въвеждате, в реално време, така че можете да прецените четивността и контраста преди да копирате каквото и да било.
✓ Копираният изход остава честен относно браузърната съвместимост: за ефектите контур и градиентно запълване предоставяме по един стандартен резервен ред заедно със свойството, специфично за WebKit, с пояснителна бележка защо.

Случаи на употреба

  • • Настройте неонов надпис за заглавие на целева страница, включете анимация с произволно примигване и копирайте готовия блок с text-shadow и @keyframes.
  • • Задайте дълбочина на 3D екструдиране 8 и ъгъл 30 градуса за масивно изометрично лого, след което копирайте генерирания стек от text-shadow директно в стиловия си файл.
  • • Създайте контурно заглавие както с правилото -webkit-text-stroke, така и с резервния text-shadow, за да се визуализира контурът и в браузъри без поддръжка на stroke.