У цій статті
Що робить CSS Text Shadow
Властивість CSS text-shadow додає ефекти тіні до символів тексту. Кожна тінь визначається горизонтальним зміщенням, вертикальним зміщенням, радіусом розмиття та кольором. На відміну від box-shadow, text-shadow повторює точну форму кожного гліфа символу, створюючи ефекти, що обгортають літерні форми.
Можна накладати кілька тіней на один елемент, розділяючи їх комами. Це дозволяє створювати складні ефекти — неонове сяйво, тиснені літери, 3D-екструзії та вогняний текст — все на чистому CSS, без зображень чи canvas.
Використання генератора тіні тексту
Генератор надає інтуїтивні елементи керування для створення тіней тексту без запам'ятовування синтаксису CSS. Ви можете налаштовувати кожен параметр у реальному часі та бачити результат миттєво.
- Елементи керування зміщенням — перетягуйте повзунки або вводіть точні значення в пікселях для горизонтального (X) та вертикального (Y) зміщення
- Радіус розмиття — збільшуйте розмиття для м'яких, сяючих ефектів або тримайте його на нулі для чітких тіней
- Кілька шарів — додавайте кілька шарів тіні та змінюйте їх порядок для створення складних композитних ефектів
Спробуйте безкоштовно — реєстрація не потрібна
Згенерувати CSS Text Shadow →Креативні текстові ефекти з text shadow
Тіні тексту — це не лише для тонких ефектів глибини. Комбінуючи кілька шарів тіні з різними зміщеннями, значеннями розмиття та кольорами, можна створювати вражаючі візуальні ефекти повністю на CSS.
- Неонове сяйво — використовуйте нульове зміщення з великим радіусом розмиття та яскравим кольором (блакитний, пурпурний, салатовий), повтореним у кількох шарах зі зростаючим розмиттям
- Тиснення та letterpress — поєднайте світлу тінь, трохи зміщену вниз-вправо, з темною тінню, трохи зміщеною вгору-вліво, на сірому фоні для ефекту вдавлення в метал
- 3D-екструзія — складіть багато тіней зі зростаючими зміщеннями (1px 1px, 2px 2px, 3px 3px...) у поступово темніших кольорах для об'ємного текстового ефекту
Часті запитання
Чи впливає text-shadow на продуктивність?
Одиничні тіні мають незначний вплив на продуктивність. Однак накладання багатьох тіней з великими радіусами розмиття може спричинити уповільнення рендерингу, особливо на мобільних пристроях. Тестуйте складні ефекти на цільових пристроях.
Які браузери підтримують text-shadow?
Text-shadow має чудову підтримку в усіх сучасних браузерах, включаючи Chrome, Firefox, Safari, Edge та мобільні браузери. Підтримується з IE10 і може безпечно використовуватися без фолбеків.
Чи можна анімувати text-shadow за допомогою CSS-переходів?
Так. Text-shadow повністю анімується за допомогою CSS-переходів та keyframe-анімацій. Можна плавно переходити між різними станами тіні для ефектів наведення та анімацій.