Detail
Detail
0:00 / 0:00

Glassy Button

A pretty cool glassy button

2025

Year
wabi.aiSource
Button
Tags

How to Create This

It's all about layers and blur.

  1. Background Blur: backdrop-filter: blur(20px)
  2. Transparency: background: rgba(255, 255, 255, 0.1)
  3. Border: A thin, semi-transparent border to define the edge.
  4. Shadow: A soft drop shadow to lift it up.

Combine these to create a surface that feels like frosted glass.

Rene WangRene Wang·

More Details

We Regulary Update this List

You can get notified by subscribing to our biweekly newsletter. No ads, no spam, just new content.

Interective Error Page

Few people get there, but it's nice to reduce their sadness when they do

Playful
Profile banner
Detail

Detail

@detaildotdesign

Get highlight from your timeline and exclusive content.

10+Exclusive content
160+Followers