Glassmorphism CSS Generator

Create frosted-glass “glassmorphism” CSS visually with simple sliders.
Adjust blur, opacity, border, and shadow in real time, then copy the code with one click.

This tool has been used … times.

Glassmorphism A frosted-glass, see-through UI

Estimating text contrast on the gradient.

Background (preview backdrop)

Presets

Adjust properties

Blur: 12px

Opacity (glass fill): 18%

Saturation: 160%

Radius: 16px

Border opacity: 30%

Shadow strength: 25%

Tint (glass color)

Code output

The initial output is “HTML + CSS”, which includes the backdrop and decorative shapes from the preview. Choose another format if you only need the glass properties or a class.

<div class="glass-wrap">
  <div class="glass-deco glass-deco1" aria-hidden="true"></div>
  <div class="glass-deco glass-deco2" aria-hidden="true"></div>
  <div class="glass-deco glass-deco3" aria-hidden="true"></div>
  <div class="glass-deco glass-deco4" aria-hidden="true"></div>
  <div class="glass-card">
    <strong class="glass-card-title">Glassmorphism</strong>
    <span class="glass-card-text">A frosted-glass, see-through UI</span>
  </div>
</div>

.glass-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 260px;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  background: linear-gradient(135deg, #F6D365 0%, #FDA085 100%);
}

.glass-deco {
  position: absolute;
  border-radius: 50%;
}

.glass-deco1 {
  width: 150px;
  height: 150px;
  top: -34px;
  left: 50%;
  margin-left: -240px;
  background: rgba(255, 255, 255, 0.4);
}

.glass-deco2 {
  width: 110px;
  height: 110px;
  bottom: 4px;
  left: 50%;
  margin-left: 55px;
  background: rgba(255, 255, 255, 0.3);
}

.glass-deco3 {
  width: 70px;
  height: 70px;
  top: 18%;
  right: -20px;
  background: rgba(0, 0, 0, 0.18);
}

.glass-deco4 {
  width: 96px;
  height: 96px;
  top: 50%;
  left: 50%;
  margin: -78px 0 0 -40px;
  background: rgba(255, 255, 255, 0.45);
}

.glass-card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 78%;
  max-width: 340px;
  padding: 26px 20px;
  text-align: center;
  color: #1F2937;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.glass-card-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.glass-card-text {
  font-size: 12.5px;
  opacity: 0.85;
}

@media (max-width: 600px) {
  .glass-wrap { height: 220px; }
  .glass-card { width: 86%; padding: 20px 14px; }
}

What is glassmorphism?

Glassmorphism is a UI design style that makes elements look like frosted glass, letting the background show through with a soft blur. It is widely used in modern OS design, including macOS, iOS, and Windows 11.

In CSS, the effect is built mainly with the backdrop-filter blur, combined with a semi-transparent background color, a thin border, and a soft shadow.

How to use

Switch the preview backdrop with “Background”. How the glass looks depends heavily on what is behind it.
Pick a preset close to the look you want from “Presets”.
Fine-tune blur, opacity, saturation, radius, border, and shadow with the sliders.
Change the glass color with “Tint”. White is the classic choice; a dark color turns it into dark glass.
When ready, press “Copy” to copy the selected format. For “HTML + CSS”, place the HTML in your page and the CSS in your stylesheet.

How to apply the CSS

For “HTML + CSS”, put the HTML section in your page and the CSS section in your stylesheet. Paste “Properties only” and “With class” into a CSS field.

Example: using the “With class” format in a CSS field

.glass-card {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

* backdrop-filter blurs whatever is behind the element. The effect is invisible unless the parent or page background has an image, gradient, or other content behind the glass.

* -webkit-backdrop-filter is included for Safari support. The code works in all major modern browsers.

Tips for a beautiful result

🖼

Glass needs a background
The effect is barely visible on a flat solid color. Place the glass over a photo or gradient.

💧

Balance blur and opacity
The stronger the blur, the lower you can keep the fill opacity for a more elegant look.

✨

Borders and shadows add “thickness”
A thin white border (1px) and a soft shadow make the element feel like a real pane of glass.

日本語版はこちら

Please also review the Terms of Use for this web app before using it.

Found a bug or have feedback? Let us know here.