跳转到正文
◇

Glassmorphism Generator

すりガラス風カードのCSSを設計。

glass12px · 25%
#ffffff
Blur12px
Opacity25%
Saturation180%
Border1px
Border α35%
Radius16px
Shadow Y8px
Shadow blur32px
Shadow α25%
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0px 8px 32px 0px rgba(31, 38, 135, 0.25);
border-radius: 16px;

Glassmorphism blurs what sits behind the card via backdrop-filter. Opaque parents or overflow: hidden can mute the effect. Output includes -webkit-backdrop-filter for Safari.

关于Glassmorphism Generator

A glassmorphism generator visually designs frosted-glass cards—semi-transparent fills plus backdrop-filter blur, borders, and soft shadows. toco.tools previews the effect on a colorful backdrop while you tune fill, opacity, blur, saturation, border, shadow, and radius, then copies CSS including -webkit-backdrop-filter. Opaque parents or overflow: hidden can mute the effect; heavy blur has a performance cost, so keep values modest.

使用方法

  1. Pick a preset or tune parameters
  2. Preview the frosted-glass look
  3. Copy the glass CSS

常见问题

What is glassmorphism?

A UI style that uses semi-transparent fills and backdrop-filter blur to look like frosted glass.

Why isn’t the blur visible?

backdrop-filter blurs content behind the element. Opaque parents or empty backgrounds make the effect hard to see.

Are settings sent externally?

No. All processing runs in your browser.

Does it work in Safari?

Yes. The CSS includes -webkit-backdrop-filter so Safari gets the same effect.