👋

Hello there!
Log into the academy:

In order to log into your academy profile, please provide your email and password

Used by 250,000 people from 137 countries

The original generator for Glassmorphism

Made by the person who created the glassmorphism name.

✨ Learn more

Settings

Blur value20

Refraction0.15

Depth10

.glass-card {
  width: 240px;
  height: 360px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px 10px rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

Copy CSS

What is Glassmorphism?

Glassmorphism is a design style, coined by Michal Malewicz from Hype4.Academy to connect and combine all of the uses of the “frosted glass” effect in the UI. By categorizing it and giving it a common name, it became easier to find and learn about it from resources all around the web.

After the initial article, written in November of 2020, the trend and the name exploded online, with its own #glassmorphism hashtag and thousands of UI exercises created in this style. You can read the original article here, at the academy as well.

Read the original article that named the trend

Glassmorphism in user interfaces

👑

Hello, become a PRO.

For just $10/month you can get guided challenges and AI design feedback, your individual -40% promo code on all courses, premium articles, videos and invitation to exclusive events.

❗️ Prices will increase soon due to high demand - order now to secure the current prices.