How to use it
- Move Blur to set how much the background is frosted. Around 8 to 16 px is common.
- Lower Background opacity for clearer glass or raise it for a milkier look.
- Adjust saturation, border opacity and corner radius, and pick a glass color. White is the classic choice; a dark color gives smoked glass.
- Copy the CSS and paste it into the rule for your card.
What the output means
background: rgba(255, 255, 255, 0.2); tints the card, backdrop-filter: blur(12px) saturate(150%); blurs and enriches what is behind it, and border: 1px solid rgba(255, 255, 255, 0.3); adds the thin light edge that sells the glass look. With border opacity at 0 the border line is dropped.
Example
The default settings produce a white glass panel at 20 percent opacity, 12 px blur, 150 percent saturation, a 16 px radius and a 30 percent white border.
Tips
- Keep text contrast in mind: white text on light glass over a bright photo is hard to read. A darker glass color helps.
- Put the card over an image or gradient; on a flat background the effect is invisible.
- Test on a real phone if you use several glass panels on one screen.