CSS 滤镜

高斯模糊

通过 blur-* 给图片添加高斯模糊样式。

原始

blur-none

blur-sm

blur

blur-md

blur-lg

blur-xl

灰度和反色

通过 grayscale 将图像转为灰度图像；通过 invert 将图像设置为反色。

原始

grayscale

invert

形状阴影

通过 drop-shadow-* 给元素设置形状阴影效果，通常用在图片上。

原始

drop-shadow-none

drop-shadow-sm

drop-shadow

drop-shadow-md

drop-shadow-lg

drop-shadow-xl

drop-shadow-2xl

背景模糊

通过 backdrop-blur-* 添加覆盖区域模糊样式。

原始

backdrop-blur-none

backdrop-blur-sm

backdrop-blur

backdrop-blur-md

backdrop-blur-lg

backdrop-blur-xl

backdrop-blur-2xl

backdrop-blur-3xl

禁用滤镜

通过 filter-none 来禁用之前添加的滤镜效果。

filter-none