CSS Visual Directory
Glassmorphism Card
Frosted-glass panel built from transparency and a backdrop blur.
Edit Glassmorphism Card
Change any value to see it update live.
About this entry
What it is
Frosted-glass panel built from transparency and a backdrop blur.
Overlay cards on colourful or photographic backgrounds.
Copy & use
How to copy and use glassmorphism card
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Overlay cards on colourful or photographic backgrounds.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Combines a translucent fill with a blur of whatever sits behind it, plus a light border to catch the edge. The blur is what separates it from plain transparency.
rgba(255, 255, 255, 0.15)- The translucent fill. Low alpha lets the backdrop through.
backdrop-filter: blur(12px)- Blurs the content behind the element. This is the whole effect.
1px solid rgba(255, 255, 255, 0.3)- A brighter edge, imitating light catching the rim of glass.
border-radius: 16px- Rounding, without which it reads as a plain translucent panel.
Making it yours
How to adjust glassmorphism card
There must be something interesting behind it — over a flat colour the blur has nothing to work with and the panel just looks washed out.
Worth knowing before you ship it
backdrop-filter is expensive to render, especially on long scrolling lists, and it needs a fallback background so the panel stays readable where it is unsupported.
Common questions
Using glassmorphism card
What is glassmorphism card?
Frosted-glass panel built from transparency and a backdrop blur. Overlay cards on colourful or photographic backgrounds.
Where do I put the glassmorphism card CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Overlay cards on colourful or photographic backgrounds. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will glassmorphism card work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise glassmorphism card after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing