WScreen App
White Screen
Blue Screen
Red Screen
Green Screen
Yellow Screen
Orange Screen
Pink Screen
Purple Screen
Black Screen
Zoom Lighting
Gradient Screen
Pixel Test
Refresh Rate

Glass CSS Generator

U

Jane Doe

UI/UX Designer

10px
180%
100%
20%
.your-element {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px) saturate(180%) brightness(100%);
  -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(100%); /* For Safari */
  border-radius: 12px;
  border: 1px solid rgba(209, 213, 219, 0.3);
}
Create Beautiful Effects with our Glass CSS Generator

Our Glass CSS Generator makes it easy to create the popular "glassmorphism" UI effect using pure CSS. This tool leverages the `backdrop-filter` property to create a beautiful blur and brightness effect on elements, making them appear like frosted glass.

Simply adjust the sliders for blur and brightness, and set a tint color and opacity to get the exact look you want. Once you're satisfied, use our glass css generator to get the code and apply it to your website. It's an excellent way to add depth and a modern aesthetic to your designs.

Frequently Asked Questions