CSS盒阴影生成器
从偏移、模糊、扩散、颜色和不透明度值生成CSS box-shadow声明，带可选的inset — 复制现成的rgba()阴影到您的样式表中。
输入
与阴影颜色组合为rgba()值。
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-box-shadow-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"offsetX": "4",
"offsetY": "4",
"blurRadius": "10",
"spreadRadius": "0",
"color": "#000000",
"opacity": "25",
"inset": ""
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-box-shadow-generator` tool (CSS Box Shadow Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-box-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 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
它的功能
CSS盒阴影生成器将一组滑块和颜色选择器转换为
现成的CSS box-shadow声明。调整水平和
垂直偏移、模糊半径、扩散半径、阴影颜色和不透明度，
可选择将阴影转换为内部（inset）阴影 — 生成的CSS
会在您移动每个控件时实时更新。
box-shadow语法
CSS box-shadow声明遵循以下形式：
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;- offset-x — 阴影水平移动的距离。正值 将其向右推移，负值将其向左推移。
- offset-y — 阴影垂直移动的距离。正值 将其向下推移，负值将其向上推移。
- blur-radius — 阴影边缘有多柔和。
0会产生 硬边缘阴影；更大的值会进一步散布模糊，不能为负。 - spread-radius — 在应用模糊之前扩大（正）或缩小（负）阴影。 在原始CSS中是可选的，但这里总是包含为完全明确的声明。
- color — 阴影的颜色，输出为
rgba(r, g, b, a)以便alpha通道 捕获不透明度滑块以及RGB值。 - inset — 一个可选的关键字，放置在偏移之前，它翻转 阴影以在元素边框内部而不是外部进行渲染（产生"按压"或"凹陷"的外观）。
多个阴影可以通过逗号分隔声明来堆叠
(box-shadow: a, b, c;)。此工具专注于一次生成一个干净的阴影声明，
这是大多数设计所需的，您可以手动对多个阴影效果进行分层或微调。
如何使用
- 拖动水平偏移和垂直偏移滑块来 定位阴影。
- 调整模糊半径以柔和边缘，扩散半径以扩大 或缩小阴影形状。
- 选择阴影颜色并设置不透明度 — 工具将两者结合为
单一的
rgba()值。 - 如果要内部阴影而不是 投影阴影，请启用内部阴影。
- 从代码输出复制生成的
box-shadow声明并 将其粘贴到您的样式表中。
常见问题
为什么输出使用rgba()而不是十六进制颜色？
因为CSS十六进制颜色（#000000）本身无法表达部分透明度。
将颜色选择器与不透明度滑块结合成
rgba(r, g, b, a)可以让您精确控制阴影的外观强度，
而无需单独的opacity属性影响元素的其余部分。
spread-radius可以是负数吗？ 可以 — 负扩散在应用模糊之前缩小阴影的形状， 这对于柔和的、限制范围的阴影（如微妙的高度效果）很有用， 而不是延伸到元素边缘之外的阴影。
常规阴影和内部阴影之间有什么区别？
常规box-shadow在元素边框外部渲染，就像
元素从页面上浮起一样。内部阴影在
边框内部渲染，使元素看起来被按压或凹陷。
此工具会存储或上传任何内容吗？ 不会。所有计算都在您的浏览器中本地运行 — 您的颜色和滑块值 永远不会离开您的设备。