Генератор текстових ефектів CSS
Введіть власний текст і спостерігайте наживо справжнє неонове світіння, 3D-екструзію, тиснення, контур та градієнтну заливку CSS — параметри розраховуються реальною математикою, а блок CSS можна скопіювати.
🔒 Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Більшість галерей текстових ефектів CSS пропонують фіксований пресет: одне неонове світіння, одну 3D-екструзію, бери що дають. Цей генератор натомість будує CSS із ваших параметрів на тому тексті, який ви вводите. Виберіть неонове світіння, 3D-екструзію, тиснення/рельєф, контур або градієнтну заливку з перемикача ефектів, налаштуйте відповідні параметри — і живий перегляд разом із блоком CSS для копіювання оновлюються після кожної зміни.
Ефект 3D-екструзії вартий розуміння: для вибраної глибини (кількості накладених шарів) і кута шар i зміщується на i × cos(кут) по горизонталі та на i × sin(кут) по вертикалі — обчислення виконуються в JavaScript за допомогою справжніх тригонометричних функцій, а не зчитуються з таблиці попередньо заданих кутів. За кута 45 градусів горизонтальне та вертикальне зміщення однакові для кожного шару, бо косинус і синус 45° рівні; поверніть повзунок кута — і побачите, як уся стопка шарів `text-shadow` обертається навколо літер у реальному часі, причому кожен наступний трохи темніший за попередній, імітуючи освітлену тривимірну грань.
Неонове світіння накладає чотири шари `text-shadow` зі зростаючим радіусом розмиття вибраним вами кольором, з опціональним мерехтінням: увімкніть його — і правило `@keyframes` із випадковою послідовністю падінь непрозорості генерується й анімується наживо, а кнопка перемішування дозволяє переграти шаблон, не пишучи жодного ключового кадру вручну. Контурний текст застосовує `-webkit-text-stroke` для браузерів, які це підтримують, а також чесний 8-напрямковий резервний `text-shadow` для тих, що не підтримують, — обидва рядки потрапляють у скопійований CSS із приміткою про причину. Градієнтна заливка обрізає `linear-gradient` за формою тексту за допомогою `background-clip: text` — це тепер стандартна властивість із широкою підтримкою, а старий префіксний рядок `-webkit-` зберігається для застарілих рушіїв.
Усе відображається локально у вашому браузері — жоден введений вами текст нікуди не надсилається. Скопіюйте готовий блок CSS разом із правилом `@keyframes`, коли воно потрібне для ефекту, прямо у свою таблицю стилів.