a11y.skipToMainContent
1

CSS 过滤器生成器

在 CSS 图像过滤器中拨打并复制过滤器属性——在样本或你自己的图像上预览.

Presets

Filters

px
%
%
%
deg
%
%
%
%

Preview subject

Preview

🌈

CSS

Was this tool helpful?
Send Image to:
Advertisement

How to use CSS Filter Generator

  1. 拖动滑动器用于模糊、亮度、对比度和其他过滤函数来构建您的效果.
  2. 可选启用滴影并设置其偏移,模糊和颜色.
  3. 点击“ 使用样本” 或上传您自己的图像, 在真实内容上预览过滤器 .
  4. 单击 CSS 复制以抓取生成的过滤属性 .

{姓名}是什么来着?

CSS 过滤器生成器允许您使用 filter 属性将图形效果堆叠到任意元素上。 拖动滑动器用于模糊、亮度、对比度、灰度、轮回、倒置、不透明、饱和和和sepia,然后可选地添加一个 dropp-shadow(),并带有自己的偏移、模糊和颜色。

每次更改都会立即更新现场预览. 测试内置的多彩样本,或者上传自己的图像,以查看过滤器在发送之前真实内容的准确情况. 图像保留在您的设备上 — 没有上传到服务器 。

从一个预设开始,如: 葡萄酒, B&W, 温暖,寒冷,戏剧性或模糊的焦点来接近快速, 然后微调. 当它向右看时, 将单行 < code> filter 声明直接复制到您的样式表。

Advertisement

FAQ

CSS过滤属性做什么?
过滤器将模糊,亮度,对比度,灰度等图形效果应用到一个元素被渲染前的色相上. 您可以将多个函数合并到一个声明中, 它们应用在您列出的顺序中 .
我的上传图像在什么地方?
没有 图像装入本地对象 URL 纯粹用于预览, 绝不离开您的浏览器 。 整个工具运行客户端,所以您的文件在设备上保持隐私.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement