0:00 / 0:00

Glassy Button

A pretty cool glassy button

Year

2025

Sourcewabi.ai
Tags
Button

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·