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.
Opens WPIDE on
Code
$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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.