Генератор CSS text-shadow

Что такое Генератор text-shadow?

Инструмент собирает CSS-свойство text-shadow из одного или нескольких слоёв. У каждого слоя есть горизонтальное и вертикальное смещение, размытие, цвет и прозрачность, а в предпросмотре результат показан на вашем собственном образце текста.

Как пользоваться Генератор text-shadow

1. Начните с пресета (Glow, Retro, Outline, Emboss) или оставьте тень по умолчанию.
2. Выберите слой и задайте горизонтальное и вертикальное смещение, размытие, цвет и прозрачность тени.
3. Добавьте слои для контуров или многослойных 3D-эффектов; ненужные слои удалите.
4. Введите свой образец текста и выберите цвета текста и фона, чтобы проверить читаемость.
5. Скопируйте CSS-код.

Пример

x 3px, y 3px, blur 0, color #ff0000, opacity 1

text-shadow: 3px 3px 0 #ff0000;

Жёсткая красная тень без размытия, смещённая на 3px вправо и вниз.

Когда использовать Генератор text-shadow

Подходит для заголовков, крупного текста на первом экране, неоновых и ретро-эффектов, а также мягких теней, повышающих контраст на фоне изображений. Для настоящей обводки крупного текста -webkit-text-stroke даёт более чёткий результат, чем стопка теней; не применяйте тяжёлые тени к основному тексту, это ухудшает читаемость.

Как работает Генератор text-shadow

Каждый слой записывается как x y blur color (у text-shadow нет растяжения и inset). Смещения и размытие задаются в px, прозрачность применяется к альфа-каналу цвета: для непрозрачных цветов получается hex, иначе rgba(). Слои разделяются запятыми, первый рисуется сверху. Пресет контура использует четыре смещения по 1px по диагоналям: это обычный способ имитировать обводку текста на чистом CSS.

Распространенные Случаи Использования

• ✓ Заголовки с неоновым свечением
• ✓ Читаемый белый текст поверх фотографий
• ✓ Ретро-заголовки с многослойным 3D-эффектом
• ✓ Имитация обводки текста без SVG
• ✓ Рельефные надписи в стиле тиснения

Часто Задаваемые Вопросы

Другие категории