Made Good Designs

Glassmorphism Generator

Create frosted-glass (glassmorphism) CSS online for free — adjust blur, transparency, saturation and border with a live preview, then copy the code.

100% private — runs entirely in your browser. Your files never leave your device.

100% private — runs in your browser
Glass
CSS 

  


  

    Glassmorphism relies on backdrop-filter, so the effect only shows over content behind the element
    (and needs the -webkit- prefix in Safari). Runs entirely in your browser.
  


  






How to use the Glassmorphism Generator



  1. Adjust blur, transparency, saturation and radius.
  2. Pick a tint color and toggle the border.
  3. Preview the glass over a colorful background.
  4. Copy the CSS (with the -webkit- prefix).



What you can use it for



  • Create frosted-glass cards and navbars
  • Design trendy glassmorphism UI
  • Get cross-browser backdrop-filter CSS
  • Experiment with blur and transparency




More free tools
Styling a website?
Generate shadows, gradients, layouts and effects with our free CSS tools — copy the code and go.
Browse all free CSS generators →





Related tools
  • Skeuomorphism Generator — tactile skeuomorphic CSS with one light direction, bevels, gloss and material textures for buttons, cards, toggles, knobs and sliders
  • Claymorphism Generator — the 3-shadow clay recipe with inflation, softness, pastel palettes, AA text, CSS and Tailwind
  • Neubrutalism Generator — neo-brutalist components with thick borders, hard offset shadows, press-down hover, contrast checks, CSS and Tailwind
  • Y2K Design Generator — glossy gel buttons, chrome text, sparkles and bubble panels from one colour, with CSS and SVG export
  • Bento Grid Generator — bento layouts from presets with tablet and mobile collapse, as CSS grid areas, Tailwind or HTML
  • Frutiger Aero Background Generator — make a seeded Frutiger Aero style wallpaper: glossy bubbles, aurora skies, green hills, water, glass orbs and lens flare, at desktop, 4K and phone sizes; PNG, JPG or SVG




Frequently asked questions



What is glassmorphism?



A frosted-glass UI style: a semi-transparent element that blurs whatever is behind it, created with CSS backdrop-filter.



Why doesn't the blur show on my site?



backdrop-filter only blurs content behind the element, so it needs something (an image or colorful background) sitting behind it to be visible.



Do I need the -webkit- prefix?



Yes — Safari requires -webkit-backdrop-filter, which the generated code includes.



Is it free and private?



Yes — free, no signup, and it runs entirely in your browser.