PocketPlay
中文

CSS Filter Generator

Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

Preview

Preview
Preview background
🖼️ Drop an image, click to choose, or paste
PNG · JPG · WebP · GIF — never leaves your device

CSS


    

  


  

    

      
Presets

      

    

    

      

        
Filters

        

          
          
        

      

      

    

    

      
Drop shadow

      

      

        
        
      

    

  




How to use the CSS filter generator
  1. Drop in your own image (it stays in the browser) or keep the sample picture.
  2. Drag the sliders — or click a preset — and watch the preview update in real time.
  3. Copy the filter line into your stylesheet, or download the filtered image as a PNG.
FAQ
Is my image uploaded anywhere?
No. The picture is read with the browser's FileReader and drawn locally; nothing is sent over the network, and the downloaded PNG is rendered on your own canvas.
Which browsers support these filters?
Every modern browser supports the filter shorthand on any element, including images, videos and whole containers. Only very old browsers need the -webkit-filter prefix.
What is the difference from backdrop-filter?
filter affects the element itself. backdrop-filter applies the same functions to whatever sits behind a translucent element — the frosted-glass effect. You can paste the same function list into either property.


  


  

    
    

          
            
            
              CSS Gradient GeneratorHOT
              Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.
            
          
          
            
            
              CSS Animation Generator
              Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.
            
          
          
            
            
              Box Shadow Generator
              Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS.
            
          
          
            
            
              Border Radius Generator
              Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS.
            
          
          
            
            
              Color PickerHOT
              Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.
            
          
          
            
            
              Color Converter
              Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.
            
          
          
            
            
              CSS Grid Generator
              Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.
            
          
          
            
            
              Flexbox Playground
              Try every flex container and item property on a live preview, then copy the CSS and HTML.
            
          
    

    
All tools →