What is glassmorphism?

A design trend popularized by macOS Big Sur and iOS that uses translucent backgrounds + heavy blur to create a frosted-glass effect. Best used over colorful or photographic backgrounds.

Why does the effect look invisible?

backdrop-filter only works when there is something colorful behind the element. On a flat black background you will see almost nothing - try it over a gradient or image.

Browser support for backdrop-filter?

Chrome, Edge, Safari (with -webkit- prefix), Firefox 103+. The tool emits both prefixed and unprefixed versions for safety.

backdrop-filter is GPU-accelerated but expensive. Avoid stacking many glass elements or using huge blur values on long pages - it can cause scroll jank on low-end devices.

CSS Glassmorphism Generator - Free Online

Preparing private browser tool…

Your file will stay on this device.

Frequently asked questions

What is glassmorphism?: A design trend popularized by macOS Big Sur and iOS that uses translucent backgrounds + heavy blur to create a frosted-glass effect. Best used over colorful or photographic backgrounds.
Why does the effect look invisible?: backdrop-filter only works when there is something colorful behind the element. On a flat black background you will see almost nothing - try it over a gradient or image.
Browser support for backdrop-filter?: Chrome, Edge, Safari (with -webkit- prefix), Firefox 103+. The tool emits both prefixed and unprefixed versions for safety.
Performance impact?: backdrop-filter is GPU-accelerated but expensive. Avoid stacking many glass elements or using huge blur values on long pages - it can cause scroll jank on low-end devices.

Related tools

Color Picker

File Hash

Base64 Encoder

Text Case Converter

Frequently asked questions