design / 可用工具

对比/模糊/灰度滤镜组合即见器

极速拖拽拉伸产生出诸如 `filter: blur(2px) grayscale(100%);` 等极其复杂的复式视觉效果组合。配备实时覆盖原图的热响应。支持自由组合发现意想不到的滤镜效果。

DesignCSSFrontend

收藏工具

当前还没有选择收藏模式。

快捷操作

返回设计配色 浏览全部工具

你可以复制当前工具页链接,或者在支持的设备上直接调用系统分享。

视觉与图形

CSS 高级图像滤镜

Blur (模糊) 0px
Brightness (亮度) 100%
Contrast (对比度) 100%
Grayscale (灰度黑白) 0%
Hue-Rotate (色相旋转) 0deg
Invert (颜色反转) 0%
Saturate (饱和度) 100%
Sepia (复古黄褐) 0%
Test Demo Abstract Liquid
CSS CSS Filter Rule
filter: none;

使用场景

  • 遇到哀悼日,需要把网站图标全部通过滤镜挂暗或者置灰。直接在这试参数。

如何使用

  1. 1. 直接拖下方的范围滑块。若需要代码直拷左下的样式挂载到你的 DOM 里即可。

示例输入输出

Grayscale

100%

Filter Stack

filter: grayscale(100%);

FAQ

兼容性很差?

此技术早在 6 年前就全面占据现代设备。手机端照吃不误。

工具列表

相关推荐

你可以从这里继续打开相近场景的工具,减少重复搜索。

绝对颜色反转镜像

黑白原力对冲器与护眼色反转分析

可用

想知道你的网站色调做暗黑模式的反演对比是什么样子?数学上的全逆色(255-x)不仅能推导出黑夜模式的安全色,还能快速获得对冲撞击美学的反置色谱。

Design Color

Macaron 莫兰迪发色

高明低饱和粉彩高级渐变随机盲盒

可用

针对现代极简界面设计的颜色渲染法,只需一键即可持续获取温和低饱和度的柔和配色方案,适用于背景图与图标设计。

Design Color