# Frosted Glass Card Style (SCSS)

> Adds a "wpide-glass" class for a frosted-glass look (blurred, semi-transparent background and fine border), great for cards placed over photos or gradients.

- Type: SCSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: design, cards, scss
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-glass-card-scss/

## Code

```scss
$glass-tint: #ffffff;
$glass-opacity: .16;
$glass-blur: 14px;
$glass-radius: 16px;

.wpide-glass {
    padding: 1.5rem;
    border-radius: $glass-radius;
    border: 1px solid rgba($glass-tint, .35);
    background: rgba($glass-tint, .85);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        background: rgba($glass-tint, $glass-opacity);
        -webkit-backdrop-filter: blur($glass-blur) saturate(160%);
        backdrop-filter: blur($glass-blur) saturate(160%);
    }
}
```

## Notes

Put a Group with the class wpide-glass inside a Cover block for the best effect. Browsers without backdrop blur get a solid fallback.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Frosted Glass Card Style (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/