极光/渐变斑点 CSS 背景生成器
使用 2-5 个彩色径向渐变斑点生成柔软、令人印象深刻的极光 CSS 背景，支持可调节的模糊、位置和尺寸，以及可选的 @keyframes 漂移动画。复制 CSS 或实时预览。
输入
背景
显示在斑点后面的纯色。
斑点的柔软度 — 较高的值会更好地混合它们。
斑点
斑点 1
斑点 2
斑点 3
动画
输出
您的极光背景将显示在此处。
将其添加到样式表中，然后对容器应用 class="aurora-bg"。
内联样式的 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"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-aurora-blob-generator` tool (Aurora / Gradient Blob CSS Background Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-aurora-blob-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 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
什么是"极光"背景？
极光背景（也称为"渐变斑点"或"斑点渐变"背景）是一种柔软、闪耀、失焦的色彩洗礼，由无数 SaaS 营销页面和英雄部分推广 — 几个大的模糊彩色形状在内容后面缓慢漂移。与平坦的 linear-gradient 不同，它看起来像深度和光线，而不是单一的平坦褪色。
该工具使用纯 CSS 创建效果：2 至 5 个彩色 radial-gradient() 图层（"斑点"），每个都可以独立定位和调整大小，并叠加为以逗号分隔的 background-image 图层在内容后面，并用单个 filter: blur() 软化。打开可选动画，斑点将通过生成的 @keyframes 规则缓慢漂移 — 运行时不需要 JavaScript、画布或图像。
如何使用此工具
- 选择一个基本颜色 — 显示在斑点后面的纯色 — 和一个模糊量。更高的模糊值会将斑点融合成更平滑的光芒；较低的值会保持每个斑点更清晰。
- 选择斑点数量（2-5）。每个斑点都有自己的颜色、位置 X/Y %（其中心在容器中的位置）和尺寸 %（在褪色为透明之前的扩展程度）。
- 可选地启用动画以添加缓慢的
@keyframes漂移动画 — 每个斑点滑动到附近的位置并返回，在您控制的持续时间内，使背景永远不会显示为静止。 - 复制 CSS 并将
class="aurora-bg"应用到定位的容器（或重命名类以匹配您自己的样式表） — 斑点在内容后面的::before伪元素上呈现，因此文本和其他子元素即使在较重的模糊下也保持完美清晰。 - 预览显示 CSS 生成的内容；下方的 HTML 代码片段是与上面预览相同的标记，是一个自包含的内联样式的
<div>，可以粘贴到样式表不方便的任何地方。请注意，代码片段始终显示静止（非动画）帧 — 内联style属性无法包含@keyframes规则，因此漂移仅在 CSS 块（连同其@keyframes aurora-drift）实际在样式表中时才出现。
为什么选择模糊而不是更多的渐变停止？
应用于整个分层背景的单个 filter: blur() 是给予极光特征柔软、闪耀边缘的原因 — 它的计算成本低廉，在所有斑点上都以相同的方式工作，无论位置或大小如何，这与 Stripe 或 Linear 营销页面上的"磨砂光"外观背后的技术相同。将其分层到 ::before 伪元素上（而不是模糊容器本身）可以防止模糊出血到您的实际内容中。
常见问题
这在每个浏览器中都能工作吗？
是的。分层的 radial-gradient() 背景、filter: blur() 动画和 CSS @keyframes 动画已在所有主要浏览器中支持多年 — 不需要供应商前缀。
为什么即使启用了动画，实时预览看起来仍然是静态的？
预览呈现与下方 HTML 代码片段相同的内联样式标记，内联 style 属性无法引用 @keyframes 规则。动画是真实的并包含在生成的 CSS 块中 — 一旦您将 CSS 粘贴到实际的样式表中，您将看到它移动。
我可以使用超过 5 个斑点吗？
使用此工具不能 — 5 可以保持生成的 CSS 简短且易于手动编辑，同时仍提供丰富、分层的外观。如果需要更多，您可以随时在输出中自己复制 radial-gradient() 图层。
为什么没有每个斑点的不透明度控制？ 根据设计，每个斑点已经从完全颜色褪色到完全透明（这是"尺寸 %"控制的），全局模糊进一步均匀地软化了每个斑点 — 额外的不透明度滑块不会有意义地改变可见结果，因此被遗漏以保持控制的重点。
隐私
一切都在您的浏览器中发生。您选择的颜色、位置和设置永远不会发送到服务器 — CSS、HTML 和预览在您调整控制时在本地生成和更新。