Web Tools tools.bryantsmith.com

CSS & Layout

Backdrop Filter Generator

Build frosted-glass backdrop-filter effects, tune the blur, tint and radius, then copy the CSS. Everything runs in your browser — nothing is uploaded.

Runs in your browser v1.0.0

Glass controls

0 filters

Drag a slider to shape the glass; the preview and CSS update live. Start from a preset for a known look.

Presets

%
px
More filter functions

Extra backdrop-filter functions. Values left neutral are omitted from the CSS.

Border
px
%
Box shadow

Format: offset-x offset-y blur colour. Example: 0 8px 32px rgba(0,0,0,0.35).

Import existing CSS

Live preview

updates as you drag

Glassmorphism

Frosted card

This panel blurs the colourful scene behind it. Drag the sliders to shape the glass.

CSS output


                    

                        
                        
                        
                    

                

            

        

    


    

        

            
How it works

        

        

            

                backdrop-filter blurs whatever is painted behind an element, so the
                preview shows a translucent card floating over a colourful scene. The generator
                writes the CSS filter chain in canonical order
                blur() brightness() contrast() saturate() hue-rotate() grayscale() sepia() invert() opacity(),
                omits neutral functions, and adds the -webkit- prefix for Safari. The
                optional share link stores the values in the URL fragment, which never leaves your
                browser.
            

        

    




Related tools
  • CSS Filter GeneratorBuild CSS filter chains for blur, brightness, contrast, hue, saturation and more with a live preview and copyable CSS.
  • Border Radius GeneratorSet uniform or per-corner border radii with a live preview, then copy the CSS — entirely in your browser.
  • Box Shadow GeneratorVisually build single or layered CSS box shadows and copy production-ready CSS — entirely in your browser.
  • CSS Animation BuilderCreate CSS @keyframes animations visually with a live preview, presets and copyable CSS.
  • CSS Clamp GeneratorGenerate responsive clamp() values from minimum and maximum sizes and viewport ranges, with a live preview.
  • CSS Gradient GeneratorBuild linear, radial and conic CSS gradients with a live preview and copy-ready CSS — all in your browser.
More CSS & Layout tools