Glassmorphism CSS Generator
Create custom glassmorphism effects with CSS using this free online generator.
Adjust the background opacity, blur, border, border radius, shadow, and other settings while checking the result with a real-time preview.
Copy the generated CSS code and use it directly in your website or web project.
Sponsored Links
Customization
Preview
CSS Code
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);Notes
- This tool is intended for modern browsers. Some generated CSS may not work in older browsers.
- This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.
Sponsored Links
