CSS 过滤器生成器

每个 CSS 滤镜生成器都可以让你堆叠模糊（）、亮度（）、对比度（）和其余的——但几乎没有一个让顺序很重要，因为大多数只以一个固定的顺序应用滤镜。这个是不同的：过滤器链是一个真实的、可重新排序的列表，通过本机 HTML5 拖放构建，并且重新排序两个函数确实会更改渲染的像素，就像在生产 CSS 中一样。模糊然后色调旋转看起来与色调旋转然后模糊不同，现在您可以在发布之前了解原因。

上传您自己的照片，九个可链接功能（模糊、亮度、对比度、饱和度、色调旋转、棕褐色、灰度、反转和阴影）将作为“<img>”元素上的实际“滤镜”CSS 声明实时应用到它，而不是模拟样本。从选择中添加一个函数，在列表中向上或向下拖动其行以更改其在链中的位置，调整其滑块，并在每个输入上更新预览和可复制的“filter: ...;”行。删除带有自己按钮的步骤，就在该行中。

第二个较小的链构建了一个“背景过滤器”值，应用于位于预览上方的覆盖面板，因此您可以看到毛玻璃效果（现代半透明导航栏和模态背景背后的技术），而无需触及底层图像自己的过滤器链。它甚至可以在您上传照片之前在彩色占位符背景下运行，因此您可以在几秒钟内拨入磨砂面板设计。

当预览看起来正确时，直接从输出框中复制 CSS，或导出真正的 PNG：将相同的过滤器字符串传递给 Canvas 2D 上下文的“ctx.filter”属性（该属性使用与 CSS“filter”属性相同的语法），然后使用“canvas.toBlob()”将画布转换为可下载文件。导出的图像与实时预览完全匹配，因为它是由运行相同渲染基元的相同过滤器字符串生成的。一切都发生在您的浏览器本地；您的照片从未上传到任何地方。