CSS Drop Shadow生成器
根据偏移、模糊、颜色和不透明度生成CSS filter: drop-shadow()声明——阴影会贴合透明PNG、SVG和不规则形状的轮廓，与box-shadow不同。
输入
与颜色组合为rgba()值。
输出
CSS
这对您有帮助吗？
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-drop-shadow-filter-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"offsetX": "4",
"offsetY": "4",
"blurRadius": "6",
"color": "#000000",
"opacity": "40"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-drop-shadow-filter-generator` tool (CSS Drop Shadow Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-drop-shadow-filter-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Drop Shadow生成器 — 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 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
功能介绍
通过滑块设置偏移、模糊、颜色和不透明度，生成 filter: drop-shadow() 声明。将结果直接复制到样式表中即可。
drop-shadow 与 box-shadow
box-shadow 始终为元素的矩形盒子添加阴影。filter: drop-shadow() 则为实际渲染的形状添加阴影——它沿着 alpha 通道生成，因此透明 PNG、SVG 图标、被裁剪的元素和文字都会获得贴合其真实轮廓的阴影。
filter: drop-shadow(<offset-x> <offset-y> <blur-radius> <color>);注意事项
drop-shadow()没有 spread 和 inset —— 如需这两者，请使用box-shadow。- 可以列出多个滤镜进行叠加：
filter: drop-shadow(...) brightness(1.1);。参见 CSS滤镜生成器。 - 模糊值是半径而非直径；数值越大，在大尺寸元素上绘制的开销越高。
cssdrop-shadowfiltershadowgeneratorpngsvgweb design