Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties. Glass

Glassmorphism CSS Generator

submited by

Style Pass

2021-06-30 13:00:06

Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties.

Glassmorphism is a new design trend which is primarely based on the blurry effect of an element and a background. Although glassmorphism can be seen dated all the way back to Windows Vista, it has recently re-emerged with the macOS Big Sur update and it is increasinly being used across all platforms, including mobile apps, websites, and desktop programs.

The glassmorphism effect can be achieved using the backdrop-filter: blur(); CSS property and a semi-transparent background for the element that is positioned over the background.

Everything else, such as shadows, borders, border radiuses and colors can all be tweaked based on your own preferences and project specifications.

Another aspect to keep in mind is that the glassmorphism effect should not be overused, but rather be a complementary design effect for components that usually have a background that often changes, such as the navigation bar, a sidebar, and certain cards.