PocketPlay
EN

CSS 滤镜生成器

用滑块实时调节模糊、亮度、对比度、色相、投影等效果，一键复制 CSS filter 代码。

🔒 浏览器本地运行，文件不会上传免费 · 无需注册

预览

预览
预览背景
🖼️ 拖入图片、点击选择，或直接粘贴
支持 PNG / JPG / WebP / GIF，文件不会离开你的设备

CSS 代码


    

  


  

    

      
预设滤镜

      

    

    

      

        
滤镜参数

        

          
          
        

      

      

    

    

      
投影

      

      

        
        
      

    

  




怎么用 CSS 滤镜生成器
  1. 拖入自己的图片（只在浏览器本地处理），也可以直接用示例图片。
  2. 拖动滑块，或者点一个预设，预览会实时变化。
  3. 把 filter 这行复制到样式表里，或者把处理后的图片下载成 PNG。
常见问题
图片会被上传吗？
不会。图片用浏览器的 FileReader 读取并在本地绘制，不会发送到任何服务器；下载的 PNG 也是在你本机的 canvas 上生成的。
浏览器兼容性如何？
现代浏览器都支持 filter，可以用在图片、视频和任意容器上。只有很老的浏览器才需要加 -webkit-filter 前缀。
和 backdrop-filter 有什么区别？
filter 作用于元素自身；backdrop-filter 则作用于半透明元素背后的内容，也就是常说的毛玻璃效果。同一串函数可以直接用在两个属性上。


  


  

    
    

          
            
            
              CSS 渐变生成器HOT
              可视化制作线性、径向、锥形 CSS 渐变，一键复制 CSS、Tailwind 类名或导出 SVG。
            
          
          
            
            
              CSS 动画生成器
              可视化生成 @keyframes 动画，内置贝塞尔缓动曲线编辑器、常用动效预设和实时预览。
            
          
          
            
            
              CSS 阴影生成器
              可视化叠加多层 box-shadow，内置 Material 高度与新拟态预设，实时预览并复制 CSS。
            
          
          
            
            
              CSS 圆角生成器
              拖动八个控制点自由调整每个圆角，包括不规则的“blob”形状，一键复制 border-radius 代码。
            
          
          
            
            
              在线取色器HOT
              用饱和度方块、色相与透明度滑块取色，同时查看 HEX/RGB/HSL/HSV/CMYK 并检测 WCAG 对比度。
            
          
          
            
            
              颜色格式转换
              粘贴任意颜色（名称、hex、rgb、hsl、hwb、lab、lch、oklch、cmyk），立刻得到所有其他格式。
            
          
          
            
            
              CSS Grid 布局生成器
              可视化设计 CSS Grid 布局：设置轨道尺寸与间距，拖选单元格命名区域，复制容器 CSS 与 HTML。
            
          
          
            
            
              Flexbox 布局生成器
              在实时预览中调试所有 flex 容器与子项属性，一键复制 CSS 与 HTML。
            
          
    

    
全部工具 →