CSS FILTER STUDIO

给画面，
调一层滤镜。

可视化生成 CSS filter，支持预设、图片上传、本地预览、before / after 对比、精简输出、Tailwind arbitrary value 和完整报告导出。

0 ACTIVE FILTERSLOCAL IMAGEBEFORE / AFTERCSS / TAILWIND

FILTER CONTROLS0 active

亮度100%

控制明暗，100% 为原图。

对比度100%

控制明暗反差，100% 为原图。

模糊0px

给元素整体增加高斯模糊。

灰度0%

把画面转成黑白，100% 为完全灰度。

色相旋转0°

沿色相环旋转颜色。

饱和度100%

控制颜色浓度，100% 为原图。

深褐色0%

加入复古棕黄色调。

反相0%

反转颜色，100% 为完全反相。

透明度100%

控制元素透明度。

VIEW OPTIONS

BACKGROUND

LIVE PREVIEWREADY

filter value

none

CSS block

.filtered-image {
  filter: none;
}

Tailwind arbitrary

className="[filter:none]"

REPORT

滤镜参数，
一起导出。

报告包含当前 filter、所有滑块数值、CSS block 和 Tailwind arbitrary value，方便贴进组件或设计记录。

FILTER PROFILELOCAL GENERATOR

BitLeap CSS Filter Studio

filter: none
active filters: 0
output mode: compact
preview: sample
uploaded: none

Values:
亮度: 100%
对比度: 100%
模糊: 0px
灰度: 0%
色相旋转: 0deg
饱和度: 100%
深褐色: 0%
反相: 0%
透明度: 100%

CSS:
.filtered-image {
  filter: none;
}

Tailwind:
className="[filter:none]"

ORDER MATTERS

CSS filter 函数会按顺序执行。这里固定顺序输出，便于结果稳定复现。

LOCAL IMAGE

上传图片使用 object URL 本地预览，不会上传服务器；移除或离开页面会释放资源。

CSS NOTE

blur 和高强度 filter 可能影响性能，移动端大面积背景滤镜建议谨慎使用。

BitLeap · 本地计算 · 隐私优先

滤镜参数，一起导出。

滤镜参数，
一起导出。