{}JSJSON

CSS Filter 效果生成器

通过滑块实时调节 blur、brightness、contrast、grayscale 等滤镜效果，生成 CSS filter 代码

Aa Bb Cc 123
0px
1
1
0
0deg
0
1
1
0
生成的 CSS
filter: none;

CSS Filter 说明

滤镜函数

  • blur() — 高斯模糊，单位 px
  • brightness() — 亮度，1 为原始
  • contrast() — 对比度，1 为原始
  • grayscale() — 灰度，0-1
  • hue-rotate() — 色相旋转，单位 deg
  • invert() — 反色，0-1
  • opacity() — 透明度，0-1
  • saturate() — 饱和度，1 为原始
  • sepia() — 褐色滤镜，0-1

使用技巧

  • 多个 filter 可叠加使用
  • filter 顺序会影响最终效果
  • 可配合 transition 做动画
  • backdrop-filter 可模糊背景