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

Генератор CSS фонов Aurora / Gradient Blob

Создавайте мягкий, впечатляющий CSS фон 'aurora' из 2-5 цветных радиальных градиентов-blob, с настраиваемым размытием, позициями и размерами, плюс опциональная анимация дрейфа @keyframes. Скопируйте CSS или просмотрите его в реальном времени.

Ввод

Фон

Сплошной цвет, отображаемый за blob'ами.

Мягкость blob'ов — большие значения объединяют их лучше.

Blob'ы

Blob 1

Blob 2

Blob 3

Анимация

Вывод

Здесь будет отображен ваш фон aurora.

CSS

Добавьте это в вашу таблицу стилей, затем примените class="aurora-bg" к контейнеру.

Фрагмент HTML (статичный предпросмотр)

Div со встроенными стилями, соответствующий предпросмотру выше — вставьте где угодно. Не включает анимацию дрейфа.

Это было полезно?

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

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-aurora-blob-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "baseColor": "#0f0f1e",
    "blur": "60",
    "blobCount": "2",
    "blob1Color": "#ff4d8a",
    "blob1X": "20",
    "blob1Y": "30",
    "blob1Size": "60",
    "blob2Color": "#5a3dff",
    "blob2X": "75",
    "blob2Y": "25",
    "blob2Size": "55",
    "animate": "",
    "animationDuration": "20"
  }'

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

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

Use the IOTools `css-aurora-blob-generator` tool (Aurora / Gradient Blob CSS Background Generator) on this input:

YOUR_INPUT_HERE

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

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

<iframe
  src="https://iotools.cloud/embed/css-aurora-blob-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор CSS фонов Aurora / Gradient Blob — 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

Руководства

Что такое фон "aurora"?

Фон aurora (также называемый "gradient blob" или "blob gradient" background) — это мягкое, сияющее, размытое облако цвета, популяризованное бесчисленными маркетинговыми страницами SaaS и hero-секциями — несколько больших размытых цветных форм, медленно дрейфующих за содержимым. В отличие от плоского linear-gradient, это выглядит как глубина и свет, а не как единый плоский переход.

Этот инструмент создает эффект с чистым CSS: 2-5 цветных слоев radial-gradient() ("blob'ов"), каждый независимо позиционируемый и размеренный, сложенные как разделенные запятыми слои background-image позади вашего содержимого и смягченные единственным filter: blur(). Включите опциональную анимацию, и blob'ы медленно дрейфуют через сгенерированное правило @keyframes — без JavaScript, canvas или изображений, требуемых во время выполнения.

Как использовать этот инструмент

  1. Выберите основной цвет — сплошной цвет, отображаемый за blob'ами — и величину размытия. Более высокие значения размытия сливают blob'ы в более плавное сияние; более низкие значения держат каждый blob более отдельным.
  2. Выберите количество blob'ов (2-5). Каждый blob получает свой цвет, позицию X/Y % (где находится его центр в контейнере) и размер % (как далеко он распространяется перед исчезновением в прозрачность).
  3. Опционально включите анимировать, чтобы добавить медленную анимацию дрейфа @keyframes — каждый blob скользит в близлежащую позицию и обратно, в течение времени, которое вы контролируете, чтобы фон никогда не выглядел статичным.
  4. Скопируйте CSS и примените class="aurora-bg" к позиционированному контейнеру (или переименуйте класс, чтобы соответствовать вашей собственной таблице стилей) — blob'ы отображаются на псевдоэлементе ::before позади вашего содержимого, поэтому текст и другие дочерние элементы остаются идеально четкими даже при интенсивном размытии.
  5. Предпросмотр показывает ровно то, что производит CSS; фрагмент HTML ниже — это та же разметка, что и самодостаточный <div> со встроенными стилями, который вы можете вставить в любое место, где таблица стилей неудобна. Обратите внимание, что фрагмент всегда показывает кадр покоя (без анимации) — встроенный атрибут style не может содержать правило @keyframes, поэтому дрейф появляется только после того, как блок CSS (с его @keyframes aurora-drift) действительно находится в таблице стилей.

Почему размытие вместо большего количества gradient stops?

Единственный filter: blur(), применяемый ко всему слоистому фону, — это то, что дает aurora характерные мягкие, сияющие края — это дешево вычислять, работает идентично для всех blob'ов независимо от позиции или размера, и это та же техника, стоящая за внешним видом "frosted glow" на сайтах, таких как Stripe или маркетинговые страницы Linear. Наложение его на псевдоэлемент ::before (вместо размытия самого контейнера) предотвращает просачивание размытия в ваше фактическое содержимое.

FAQ

Будет ли это работать во всех браузерах? Да. Слоистые фоны radial-gradient(), анимации filter: blur() и CSS @keyframes поддерживаются во всех основных браузерах уже много лет — никаких префиксов поставщиков не требуется.

Почему прямой предпросмотр выглядит статичным даже с включенной анимацией? Предпросмотр отображает ту же разметку со встроенными стилями, что и фрагмент HTML ниже, и встроенный атрибут style не может ссылаться на правило @keyframes. Анимация реальна и включена в сгенерированный блок CSS — вы увидите, как она движется, как только вставите CSS в реальную таблицу стилей.

Могу ли я использовать более 5 blob'ов? Нет с этим инструментом — 5 сохраняет сгенерированный CSS коротким и легко редактируемым вручную, но все еще обеспечивает богатый, слоистый вид. Вы всегда можете дублировать слой radial-gradient() самостоятельно в выходе, если хотите больше.

Почему нет контроля непрозрачности для каждого blob? Каждый blob уже переходит от полного цвета к полной прозрачности по дизайну (это то, что контролирует "размер %"), а глобальное размытие еще больше смягчает каждый blob одинаково — дополнительный ползунок непрозрачности не изменит заметно видимый результат, поэтому он опущен, чтобы сохранить управление сфокусированным.

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

Все происходит в вашем браузере. Выбранные вами цвета, позиции и параметры никогда не отправляются на сервер — CSS, HTML и предпросмотр генерируются и обновляются локально по мере того, как вы регулируете элементы управления.

cssgradientaurorablobbackgroundgeneratoranimationweb designmesh gradient

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

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

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