Glass
morphism

Glassmorphism CSS Generator

Settings

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

CSS

Copy
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
Tools

More Glassmorphism resources

Tools and contents carefully crafted by Hire Digital especially for you
Design

What is Glassmorphism and how to use it in user interfaces?
Tutorial

Download the free Glassmorphism Figma file template
Tutorial

Download the free Glassmorphism Adobe XD file template
Understand

What is Glassmorphism

Glassmorphism design is characterized by the use of frosted glass in the UI. It can be used as a layer over the content or as a background. Glassmorphism has become an integral part of design, especially as more designers are incorporating it into their work.

Glassmorphism is gaining traction because it’s simple and clean but still offers enough variation to create something unique and interesting for your site. A lot of times, this style will be seen on sites that want to offer more information about their products without overwhelming visitors with too much text or imagery, like on a product page.