CSS过滤器生成器
通过将blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate和sepia滑块组合到单个链式filter属性中来创建CSS过滤器声明。
输入
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-filter-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"blur": "2",
"brightness": "110",
"contrast": "100",
"grayscale": "50",
"hueRotate": "0",
"invert": "0",
"opacity": "100",
"saturate": "100",
"sepia": "0"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-filter-generator` tool (CSS Filter Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-filter-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 filter属性?
filter将图形效果（模糊、色彩调整等）直接应用于元素，只需一行CSS，无需图像编辑器或额外标记。多个函数可以在一个声明中链接，用空格分隔，浏览器按写入顺序应用它们。广泛用于悬停效果、图像处理（灰度库、棕褐色"复古"外观）、禁用状态样式和快速品牌颜色着色。
本工具涵盖的九个过滤器函数
blur(px)— 使用高斯模糊柔化元素。值越大模糊越多。brightness(%)— 缩放亮度。100%不变，以下变暗，以上变亮。contrast(%)— 缩放光与暗区域之间的差异。100%不变。grayscale(%)— 向黑白方向去饱和。100%完全灰度。hue-rotate(deg)— 按给定角度围绕色轮旋转所有色调。invert(%)— 反转颜色。100%产生照片负片效果。opacity(%)— 使元素半透明，如opacity属性但作为过滤器函数（因此可与其他链接）。saturate(%)— 缩放颜色强度。低于100%使颜色变暗，高于100%使颜色更鲜艳。sepia(%)— 将图像转向温暖的棕色"老照片"色调。100%完全棕褐色。
如何使用此工具
- 拖动任何滑块来调整该过滤器函数 — 生成的CSS在您工作时实时更新。
- 组合多个滑块以创建分层效果（例如，
sepia一点加上contrast提升以获得复古外观）。 - 将滑块保持在默认（未改变）位置以完全跳过该函数 — 该工具仅写入实际更改输出的函数，保持生成的行简短且易读。
- 从CSS框复制生成的CSS，或下载为
.css文件，然后粘贴到您的样式表或<style>块中。将其应用于任何选择器：.my-element { filter: ...; }。
函数顺序
当多个过滤器处于活动状态时，此工具始终以固定顺序写入它们 — blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate、sepia — 与表单中滑块的顺序相匹配。CSS从左到右应用链式过滤器函数，因此如果您之后手动编辑输出，请记住这一点：重新排序函数可能会改变视觉结果，特别是当模糊与色彩调整混合时。
FAQ
为什么输出每次都不列出每个过滤器函数?
保留在中性值的过滤器（brightness(100%)、blur(0px)等）不会改变元素的外观，因此包含它只会产生噪音。此工具省略空操作函数，当每个滑块都处于默认值时回退到filter: none;。
我可以对这些过滤器进行动画或过渡吗?
是的 — filter可以用CSS transition或@keyframes进行动画处理，这是构建平滑悬停效果的常见方式（例如transition: filter 0.2s ease;以及切换到不同过滤器值的:hover规则）。
filter影响布局吗?
否。像transform一样，filter是纯视觉的 — 它不会重排周围内容，尽管大的blur可能会在元素框外视觉泄漏。
所有浏览器都支持filter吗?
是的，无前缀filter在所有现代浏览器中都得到完全支持。
filter: opacity()和CSSopacity属性之间有什么区别?
它们呈现相同的视觉效果，但filter: opacity()与单个filter链中的其他过滤器函数合成，而独立的opacity属性是单独的、更简单的声明。除非您已经在链接其他过滤器，否则使用普通opacity属性。
隐私
所有操作都在您的浏览器中进行。您输入的任何CSS、值或设置都不会发送到服务器 — 声明在您调整滑块时在本地生成和更新。