Генератор CSS text-shadow: тіні для тексту

Синтаксис text-shadow

text-shadow: offset-x offset-y blur-radius color. Можна задати кілька тіней через кому: text-shadow: 2px 2px 4px rgba(0,0,0,0.3), -1px -1px 0 rgba(0,0,0,0.1). Від'ємні значення зміщують тінь у протилежний бік. Нульовий blur дає різку тінь.

Ефект неону

Неоновий ефект досягається кількома шарами тіні одного кольору з різним blur-радіусом: text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 40px #ff00ff. Найкраще виглядає на темному фоні. Надмірне використання неону може негативно вплинути на читабельність.

Ефект гліч

Гліч-ефект імітує збій цифрового зображення: два зміщених кольорових контури (зазвичай червоний і синій): text-shadow: -2px 0 red, 2px 0 blue. В поєднанні з CSS-анімацією, що змінює зміщення, отримуємо динамічний глітч. Популярний у кіберпанк-стилізованих дизайнах.

Читабельність та text-shadow

Легка тінь може покращити читабельність тексту на строкатому фоні. Але сильне розмиття або надто багато шарів навпаки знижують чіткість. Для важливого тексту обирайте мінімалістичні тіні. Перевіряйте результат на різних розмірах шрифту — тінь при 12px виглядає інакше, ніж при 48px.