Glassmorphism
A frosted glass effect for modern, elegant UI design.
Get Started
Glassmorphism Preview
Generated CSS
A frosted glass effect for modern, elegant UI design.
Glassmorphism is a UI design trend characterized by a frosted glass appearance. Elements using this effect have a semi-transparent background, a blur applied to whatever is behind them, and a subtle light border. The result mimics the look of frosted or etched glass panels, giving interfaces a modern, layered and premium feel.
The trend gained massive popularity after Apple introduced it in macOS Big Sur in 2020, and it has since become one of the most widely used design styles in web and app interfaces.
Glassmorphism is achieved using the backdrop-filter CSS property, which applies a filter to everything behind the element. Combined with a semi-transparent background-color using RGBA or HSLA values, this creates the frosted glass effect. A light border using rgba(255,255,255,0.x) completes the illusion of a glass panel sitting above the background.
Full CSS: background: rgba(255,255,255,0.1); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px;
The backdrop-filter CSS property lets you apply graphical effects like blurring or color shifting to the area behind an element. Because it applies to what is behind the element, the element itself must be at least partially transparent for the effect to be visible. The most common use is blur(), which creates the frosted glass look, but you can also use saturate(), brightness() and other filter functions.
Glassmorphism only looks good when placed over a colorful or rich background — it does not work well on plain white or black backgrounds because there is nothing to blur. Use gradients or vibrant images behind your glass elements. Keep the background opacity low (10–20%) for a subtle effect. A higher blur value (12–20px) produces a more pronounced glass appearance. Always add a light border to define the edges of the glass element.
| Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|
| 76+ | 103+ | 9+ | 79+ | 63+ |
Adjust the Blur slider to control how frosted the glass appears. Use the Opacity slider to set the transparency of the glass background. The Border slider controls how visible the glass edge is. Use Radius to set the corner rounding. Choose a background preset to see how your glass card looks over different backgrounds. Finally click Copy Code to get the complete CSS for your glassmorphism component.