CSS Glassmorphism Maker
Design a frosted-glass glassmorphism effect and copy the CSS.
The frosted-glass look
Glassmorphism is the design trend of frosted, semi-transparent panels that blur whatever sits behind them — the look of translucent glass floating over a colourful background. It leans on the CSS backdrop-filter blur combined with transparency and a subtle border. This lets you design the effect visually and copies the CSS, so you can add that polished, layered look without hand-tuning the values.
Adjust the blur, transparency and tint, and copy the CSS.
Making it work, and readably
Two practical notes. The effect only shows over something — it blurs the background behind the panel, so it needs a colourful or image background to work against, and looks flat over plain white. And because the panel is semi-transparent, text on it can lose contrast, so it is worth checking readability, especially over busy backgrounds. Used with a strong backdrop and legible text, glassmorphism gives interfaces a modern, tactile depth; misused, it becomes pretty but hard to read.
CSS Glassmorphism Maker FAQ
What CSS creates the glass effect?
A backdrop-filter blur combined with a semi-transparent background and a subtle border, over a colourful backdrop.
Why does my glass effect look flat?
It blurs whatever is behind it, so it needs a colourful or image background — over plain white there is nothing to frost.
Is anything uploaded?
No. It runs entirely in your browser.