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"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-gradient-shadow-generator` tool (CSS Gradient Shadow Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<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？
辉光存在于设置为 position: absolute 的伪元素 ::before 上，该元素相对于最近的 positioned 祖先进行定位。如果父元素上没有 position: relative，辉光会改为锚定到页面（或树上的下一个 positioned 祖先），并完全在错误的位置着陆。生成的 CSS 将此设置为 .glow 规则的一部分。
.glow 规则还与 position: relative; 一起设置 isolation: isolate;。仅凭自己，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 和预览在您调整控件时在本地生成和更新。