CSS 滤镜与毛玻璃生成器

CSS Filter & Glassmorphism Generator

可视化调节图片 filter 滤镜或毛玻璃卡片参数，实时预览并输出 filter / backdrop-filter 代码。

预设:

实时预览

支持拖放图片，文件不会上传

滤镜参数模糊0px亮度100%对比度100%饱和度100%灰度0%褐色0%反相0%色相旋转0deg

filter 代码

filter: none;

加载中…

关于此工具与使用指南

理解原理 · 操作场景 · 隐私说明

CSS 滤镜与毛玻璃生成器是一款双模式可视化工具：既可调节 blur、亮度、对比度等图片滤镜，也可设计背景透明、模糊、高光边框的毛玻璃（Glassmorphism）卡片，并直接生成可用 CSS。

智能生成色阶渐变，精确计算文字与背景的 WCAG 2.1 无障碍对比度（AA/AAA）。

上传图片自动提取主色调，基于中位切分量化算法生成调色板，一键复制 CSS 变量。

可视化调节线性、径向、圆锥渐变与颜色节点，实时预览并输出 CSS 与 Tailwind 代码。