Glassmorphism CSS Generator
Generates CSS to implement a glassmorphism, frosted-glass effect background.
Flexibility to change opacity, blur value, etc.
The output CSS code can be easily used by copy and paste.
Sponsored Links
Customization
Preview
CSS Code
.glass {
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
- It is intended for use with modern browsers and may contain CSS properties that are not supported by IE or older versions of browsers.
- The reset CSS of this site is based on “modern-normalize.css”. Depending on the reset CSS and other stylesheets loaded in your project, there may be differences from the preview appearance.
Sponsored Links