Glassmorphism Generator
Create frosted-glass CSS with blur, transparency, and border controls, with live preview and copy
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Adjust blur, background transparency, saturation, and border with sliders to build the trendy translucent frosted-glass (glassmorphism) UI look. Dial in the values against a live preview layered over a colored background, then copy ready-to-paste CSS.
How to use
- Move the blur, background transparency, saturation, corner, and border sliders to craft the glass texture you want.
- Adjust the glass color and the preview background color with the color pickers.
- Check that the glass effect reads well against the colored background preview.
- Grab the finished CSS with 'Copy CSS' and paste it onto the element you want.
FAQ
- The backdrop-filter isn't working.
- backdrop-filter only produces a blur when there's a background (another color or an image) behind the element. On a plain white screen with no background, you'll see almost no change. For Safari support, we've also included -webkit-backdrop-filter.
- Does the purple preview background get copied too?
- No. The background color is only for the preview to help you see the glass effect; the copied CSS includes only the glass element's styles.
- Does it look the same in every browser?
- It works well in the latest Chrome, Edge, Safari, and Firefox, but backdrop-filter support and rendering can vary slightly by browser and device, so verify before applying. All processing runs entirely in your browser, with nothing sent to a server.