Генератор теней CSS-градиентов — мягкое свечение с градиентом позади элемента
Создавайте мягкое и красочное свечение с градиентом, расположенное позади элемента, используя псевдоэлемент ::before и filter: blur() — обычный box-shadow не может отображать градиенты. Скопируйте готовый CSS.
Ввод
Направление для линейных градиентов, начальный угол для конических градиентов.
Свечение
Насколько мягким выглядит край свечения — это радиус filter: blur().
Как далеко свечение распространяется за границы элемента со всех сторон.
Совпадает с собственным border-radius элемента, чтобы свечение следовало его форме.
Вывод
Ваше свечение с градиентом будет отображаться здесь.
Добавьте это в вашу таблицу стилей, затем примените class="glow" к элементу (требуется position: relative).
Разметка со встроенными стилями, соответствующая предпросмотру выше — вставьте где угодно.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-shadow-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"gradientType": "linear",
"angle": "135",
"color1": "#ff5f6d",
"position1": "0",
"color2": "#a855f7",
"position2": "50",
"useColor3": "",
"color3": "#00d4ff",
"position3": "100",
"useColor4": "",
"color4": "#facc15",
"position4": "100",
"blur": "40",
"spread": "20",
"opacity": "80",
"borderRadius": "16"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-gradient-shadow-generator` tool (CSS Gradient Shadow Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-gradient-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 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Почему box-shadow не может это сделать?
box-shadow принимает только один сплошной цвет — нет способа передать ему linear-gradient(), radial-gradient() или conic-gradient(), независимо от того, сколько остановок вы ему передадите. Чтобы получить красочное, мягкое свечение или "ауру" позади карточки, кнопки или изображения, вам нужен другой трюк: псевдоэлемент ::before, расположенный позади элемента (z-index: -1), размер немного больше через отрицательный inset, заполненный фоном градиента и смягченный с помощью filter: blur(). Это именно то, что генерирует этот инструмент.
Как использовать этот инструмент
- Выберите Тип градиента — Linear (прямой проход через Угол), Radial (размывается наружу от центра) или Conic (поворачивается вокруг центральной точки, начиная с Угла).
- Установите 2–4 точки цвета, каждая со своим цветом и процентом позиции. Отметьте Добавить третью точку цвета и Добавить четвёртую точку цвета, чтобы добавить больше.
- Отрегулируйте Размытие (как мягко выглядит край свечения), Распространение (как далеко свечение распространяется за границы элемента), Прозрачность и Радиус границы (совпадает с собственным
border-radiusэлемента, чтобы свечение следовало его форме). - Скопируйте сгенерированный CSS в вашу таблицу стилей, затем добавьте
class="glow"к элементу, позади которого вы хотите свечение (или переименуйте класс, чтобы он соответствовал вашей собственной номенклатуре) — сам элемент просто нуждается вposition: relative, которое уже установлено в сгенерированном правиле.glow. - Предпросмотр показывает эффект вживую; Фрагмент HTML ниже — это тот же результат как разметка со встроенными стилями, которую вы можете вставить в любое место, где таблица стилей неудобна.
Почему родитель нуждается в position: relative?
Свечение живёт на псевдоэлементе ::before, установленном на position: absolute, который позиционирует себя относительно ближайшего positioned предка. Без position: relative на родителе, свечение вместо этого привяжется к странице (или следующему positioned-предку вверх по дереву) и приземлится в совершенно неправильном месте. Сгенерированный CSS устанавливает это для вас как часть правила .glow.
Правило .glow также устанавливает isolation: isolate; наряду с position: relative;. Само по себе position: relative не создаёт новый контекст наложения — поэтому псевдоэлемент z-index: -1 ускользнул бы мимо своего соседа и сложился бы с тем предком, который имеет порядок наложения страницы, что может полностью скрыть свечение за непрозрачным фоном выше по дереву. isolation: isolate закрепляет контекст наложения на самом .glow, поэтому z-index: -1 означает только "позади моего собственного контента," что делает свечение видимым вокруг краёв элемента.
FAQ
Будет ли это работать в каждом браузере?
Да — ::before, filter: blur() и все три функции градиента поддерживаются во всех основных браузерах в течение многих лет, префиксы поставщиков не требуются.
Могу ли я поместить реальный контент перед свечением?
Да, в этом весь смысл — z-index: -1 держит градиент строго позади фона элемента и контента, поэтому текст и изображения спереди остаются совершенно резкими даже при сильном размытии.
Мне нужна только однотонная мягкая тень, не градиент — есть ли более простой инструмент?
Да, используйте Генератор CSS теней блоков — простой box-shadow легче и не нуждается в псевдоэлементе, когда всё, что вам нужно, это один сплошной цвет.
Я хочу сам градиент, а не свечение позади чего-то — где это?
Генератор CSS градиентов создаёт простое объявление background: linear/radial/conic-gradient(...) для прямого заполнения элемента, что также является местом, откуда берутся элементы управления точками цвета этого инструмента.
Что насчёт замороженного стекла вместо свечения? Это другой эффект (полупрозрачный, размытый фон, а не свечение позади элемента) — см. Генератор CSS гласмоморфизма.
Конфиденциальность
Всё происходит в вашем браузере. Выбранные вами цвета, угол и параметры никогда не отправляются на сервер — CSS, HTML и предпросмотр генерируются и обновляются локально при настройке элементов управления.