How to use Glassmorphism CSS Generator
- Adjust blur, transparency and saturation.
- Pick the glass color and border opacity.
- Copy the CSS into your project.
About this tool
Glassmorphism combines a semi-transparent background with backdrop-filter: blur() so that content behind the element is softly blurred. It needs something colorful behind it to be visible, which is why the preview sits on a gradient.
Add a prefixed -webkit-backdrop-filter for older Safari versions, and keep text contrast high because the background shows through.
Frequently Asked Questions
- Does backdrop-filter work in all browsers?
- It is supported in current Chrome, Edge, Safari and Firefox. Provide a solid fallback background for older browsers.
- Is it bad for performance?
- Large blurred areas can be costly on low-end devices, so use it sparingly.
Related tools
- CSS Box Shadow GeneratorAdjust the sliders and copy the box-shadow CSS.
- CSS Gradient GeneratorDesign a gradient visually and copy the CSS background.
- CSS Button GeneratorCreate a styled button and copy its CSS, including the hover state.
- Custom Scrollbar GeneratorDesign a scrollbar that matches your site and copy the CSS.
- SVG Blob GeneratorGenerate organic blob shapes and copy the SVG.
- CSS Border Radius GeneratorRound each corner separately and copy the CSS.