Перейти к основному содержанию
iotools.cloudiotools.cloud

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

Создайте text-shadow CSS с до четырьмя слоями смещения, размытия, цвета и прозрачности — с живым предпросмотром на вашем собственном тексте, а затем скопируйте объявление, полное правило CSS и HTML.

Ввод

Используется только для предпросмотра и HTML-фрагмента — тень работает на любом тексте.

Слои разделены запятой; первый указанный слой рисуется сверху.

При прозрачности ниже 100% цвет записывается как rgba().

Вывод

Ваш текст с тенью появится здесь.

Объявление text-shadow
CSS
HTML
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-text-shadow-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "text": "NEON",
    "fontSize": "96",
    "fontFamily": "sans",
    "fontWeight": "400",
    "textColor": "#ffffff",
    "bgColor": "#0b0b1a",
    "layers": "4",
    "offsetX1": "0",
    "offsetY1": "0",
    "blur1": "4",
    "color1": "#ffffff",
    "opacity1": "100",
    "offsetX2": "0",
    "offsetY2": "0",
    "blur2": "10",
    "color2": "#ff00de",
    "opacity2": "100",
    "offsetX3": "0",
    "offsetY3": "0",
    "blur3": "20",
    "color3": "#ff00de",
    "opacity3": "100",
    "offsetX4": "0",
    "offsetY4": "0",
    "blur4": "40",
    "color4": "#ff00de",
    "opacity4": "100"
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-text-shadow-generator` tool (CSS Text Shadow Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-text-shadow-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор текстовой тени CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

Свойство CSS text-shadow компактно, но универсально. Один слой дает вам мягкую тень. Наложите несколько слоев, и вы получите неоновое сияние, тяжелые ретро-буквы 3D, четкие очертания или выдавленный letterpress эффект. Сложная часть — числа: каждый слой имеет два смещения, радиус размытия и цвет, и эффект проявляется только когда вы видите взаимодействие слоев. Этот генератор позволяет вам регулировать каждый слой с помощью ползунков, видеть результат на вашем собственном тексте и копировать CSS, который вы можете использовать сразу.

Как его использовать

  1. Введите ваш образец текста и выберите шрифт, вес и размер. Они влияют только на предпросмотр и HTML-фрагмент, так как тень работает на любом тексте.
  2. Установите цвета текста и фона в соответствии с вашей страницей. Сияние, которое выглядит отлично на темно-синем, может исчезнуть на белом.
  3. Выберите количество слоев тени (1–4). Каждый слой получает свои элементы управления:
    • Горизонтальное/вертикальное смещение: насколько далеко тень движется вправо/вниз (отрицательные значения перемещают влево/вверх).
    • Радиус размытия: 0 дает четкую копию, более высокие значения смягчают ее в сияние.
    • Цвет тени + прозрачность: при прозрачности ниже 100% цвет записывается как rgba().
  4. Скопируйте результат. Вы получаете одностроковое объявление text-shadow, полное правило CSS (шрифт, цвета и тень) и соответствующий HTML-фрагмент.

Нажмите Попробовать пример для загрузки четырехслойного неонового сияния, что является быстрым способом увидеть, как объединяются наложенные слои. Рецепты ниже содержат точные значения для других классических эффектов.

Как работают многоуровневые текстовые тени

text-shadow принимает разделенный запятыми список теней, каждая записывается как offset-x offset-y blur-radius color. Первая тень в списке рисуется сверху, и каждая последующая находится за предыдущей. Именно эта последовательность делает классические эффекты работающими:

  • Неоновое сияние: нулевые смещения с увеличивающимся размытием: 0 0 4px #fff, затем 0 0 10px, 0 0 20px и 0 0 40px яркого цвета типа #ff00de. Это создает ореол, яркий рядом с буквами и тускнеющий снаружи. Используйте на темном фоне.
  • Ретро 3D: четкие тени (размытие 0) расположены диагонально в темнеющих оттенках (2px 2px 0, 4px 4px 0, 6px 6px 0) вытягивают буквы. Финальный размытый полупрозрачный слой (10px 10px 8px, 30% черный) их закрепляет.
  • Контур: четыре четких тени (-2px -2px 0, 2px -2px 0, -2px 2px 0, 2px 2px 0) обводят глифы. В отличие от -webkit-text-stroke, это работает везде.
  • Letterpress: светлая тень 0 1px 0 (80% белый) с темной 0 -1px 0 над ней (20% черный) заставляет текст выглядеть вдавленным в страницу. Лучше всего работает на среднесером фоне.

В отличие от box-shadow, text-shadow не имеет значения размера распространения и ключевого слова inset. Если вам нужны эти для карточки или кнопки, используйте Генератор тени блока CSS вместо этого.

Советы по производительности и доступности

  • Большие радиусы размытия на больших блоках текста требуют времени отрисовки. Сохраняйте тяжелое многоуровневое сияние для заголовков, а не основного текста.
  • Тени не учитываются при контрастности текста. Убедитесь, что сам цвет текста достаточно контрастирует с фоном, так как тени могут снизить разборчивость при малых размерах.
  • Для анимированного эффекта см. Генератор CSS текста Glitch, а для цвета внутри букв вместо вокруг них попробуйте Генератор CSS текста Gradient.

Конфиденциальность

Все работает в вашем браузере. Ваш текст и параметры никогда не загружаются.

neon textglow effect3d textretro textoutline textletterpresstypographyfont effectdrop shadowrgba

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу