Генератор фонов Aurora / Градиентный боб
Гид
Генератор фонов Aurora / Градиентный боб
Создавайте мягкие, светящиеся фоновые изображения ауроры с до четырёх цветных шариков, которые можно перетаскивать, перекрашивать и изменять размер на живом поле. Инструмент генерирует готовый CSS с помощью radial-gradient и filter: blur(), или портативный SVG с помощью feGaussianBlur — так вы можете вставить результат в любую веб-страницу, страницу-визитку или секцию в течение нескольких секунд.
Как использовать
- Выберите основной цвет для фона за пределами шариков.
- Настройте глобальное размытие ползунок для регулировки мягкости ауроры.
- Для каждого включенного шарика устанавливайте его color, позицию, размери прозрачность — или просто перетаскивайте номерную ручку на предварительном просмотре.
- Переключитесь на вывод CSS или SVG в зависимости от того, где вы планируете вставить его.
- Нажмите Рандомизировать Если вы хотите быстрый старт, то настройте его дальше.
- Скопируйте код с помощью кнопки копирования — вставьте его в свой стиль или компонент.
Возможности
- Редактор полей с несколькими шариками — до четырёх независимых шариков, каждый из которых имеет свой цвет, позицию, размер и прозрачность.
- Перетаскивание для перестановки — перетащите номерную ручку на предварительном просмотре и переместите её в любое место; ползунки остаются синхронизированными.
- Контроль глобального размытия — один ползунок регулирует общую мягкость эффекта ауроры для всех шариков одновременно.
- Вывод в виде CSS или SVG — получите чистый
radial-gradientстек сfilter: blur(), или автономный SVG, использующийfeGaussianBlur. - Кнопка случайного распределения — генерирует новые цвета и позиции для включённых шариков, чтобы вдохновить идеи.
- Копирование и загрузка — однощёкое копирование или загрузка сгенерированного кода, готового для вставки в ваш проект.
Часто задаваемые вопросы
-
Что такое фон ауроры с градиентом?
Фон ауроры с градиентом — стиль фона, имитирующий мягкие, размытые полосы света ауроры. Обычно он создаётся путём наложения нескольких больших, сильно размытых цветных пятен на темный фон, так что цвета мягко перетекают друг в друга, а не встречаются на резких линиях. Такой вид стал популярным на современных страницах SaaS, потому что он добавляет глубину и атмосферу, подходящую для движения, без визуальной нагрузки, связанной с фотографией.
-
Как CSS radial-gradient в сочетании с filter:blur создаёт эффект кластеров?
Radial-gradient рисует круглый цветной диск, который постепенно затухает до выбранного конца, поэтому наложение нескольких таких слоёв создаёт острые цветные диски. Применение filter:blur к слою размывает эти диски, усредняя каждый пиксель с его соседями, что превращает жёсткие круги в тонкие, светящиеся кластеры. Увеличение радиуса размытия расширяет усреднение, что делает кластеры более крупными и рассеянными, даже если сами градиенты не изменились.
-
Какова разница между использованием CSS filter:blur и SVG feGaussianBlur?
Оба применяют размытие в стиле Гаусса, но они находятся в разных потоках отображения. CSS filter:blur работает быстро и ускоряется аппаратно в большинстве браузеров, но может обрезаться на краях элемента и взаимодействовать неудобно с преобразованиями, стеками контекстов или фильтрами фона. SVG feGaussianBlur является частью графика фильтров SVG, поэтому он компонует предсказуемо внутри области просмотра SVG и легко встраивается как автономный элемент, что полезно, когда вы хотите, чтобы фон двигался вместе с разметкой или экспортировался в виде изображения.
-
Почему размытые фоновые изображения считаются проблемой производительности?
Тяжёлые фильтры размытия заставляют браузер перерисовывать большие области каждый кадр, при этом увеличение радиуса размытия увеличивает размер ядра, который должен обрабатываться GPU. На устройствах с низкой производительностью, анимация сильно размытого элемента или наложение многих размытых слоёв на скроллинговое содержимое может привести к падению частоты кадров и съеданию батареи. Общие решения — это сохранение размытых слоёв в статичном состоянии, предварительное преобразование их в изображение при возможности или перемещение их в отдельный слой композиции, чтобы остальная часть страницы не перерисовывалась при каждом скролле.
Установите наши расширения
Добавьте инструменты ввода-вывода в свой любимый браузер для мгновенного доступа и более быстрого поиска
恵 Табло результатов прибыло!
Табло результатов — это интересный способ следить за вашими играми, все данные хранятся в вашем браузере. Скоро появятся новые функции!
Подписаться на новости
все Новые поступления
всеОбновлять: Наш последний инструмент было добавлено 18 Июня, 2026
Примите участие
Помогите нам продолжать предоставлять ценные бесплатные инструменты
