Want to give your WordPress site a modern, frosted-glass look? Glassmorphism uses blurred backgrounds, transparency, and subtle borders to create a sleek, layered design that works for cards, popups, headers, or entire sections.
With Nexter Blocks, you can add a glassmorphism effect to any block on your WordPress website.
Best Used For:
- SaaS landing pages using frosted-glass cards to highlight pricing or features
- Portfolio sites with layered image backgrounds and blurred content panels
- Agency websites where hero sections or popup overlays need a modern translucent look
Required Setup
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- This is a Premium feature, and you need the PRO version of Nexter Blocks.
Why It Matters
A frosted-glass, translucent look is a common modern design pattern, but building it with plain CSS means hand-tuning backdrop-filter, opacity, and border values across every block that needs it, and keeping them consistent. Nexter Blocks bakes the blur/brightness/contrast/saturation controls into the block’s own Background Filter settings, so the effect is a slider adjustment instead of custom CSS.
What You Get
- A Background Filter control available by default on Nexter Blocks blocks
- Independent Blur, Brightness, Contrast, and Saturation sliders
- Works over any background image on a Container, column, or supported block
Benefits
- No custom CSS – the frosted-glass look is a set of sliders in the block panel, not a stylesheet edit.
- Available by default – there is no separate toggle to hunt for; the Background Filter option is already on the block’s Advanced tab.
- Fine-grained control – blur, brightness, contrast, and saturation are adjusted independently, so you can keep overlaid text readable against a bright or busy background image.
Capabilities
- Blur – controls the strength of the frosted-glass blur applied to the background.
- Brightness – raises or lowers the brightness of the glassmorphism background; lower it to keep overlaid text readable against a bright image.
- Contrast – adjusts the contrast level of the background.
- Saturation – adjusts the color saturation of the background.
- Any container block – the effect works on any container-style block, from any plugin, as long as it lets you set a background image on the container or column.
How It Works
There are no separate activation steps. The glassmorphism effect is available by default on all blocks from Nexter Blocks – you turn it on per-block from the Background Filter panel, not from a global settings screen.
How to Use It
To add a glassmorphism effect to any block from Nexter Blocks, follow these steps:
1. Add the Container block and select the appropriate layout.
2. Add a background image to the container or column and make the necessary adjustments.
Note: You can use any container block from any plugin as long as it allows you to add a background image to the container or column.
3. Add a block from Nexter Blocks. For example, add the Infobox block to see the effect in action.
4. After adding your content, go to Advanced → Background.
5. Go to Background Filter and click the settings icon.
6. In the popup, adjust the Blur level to create the glassmorphism effect, then refine it with the Brightness, Contrast, and Saturation sliders described in Capabilities above.
Note: For the Container block, you’ll find this option under the Style tab.
Your block now displays the glassmorphism effect, as shown below.
Learn via Video Tutorial
Use Cases
- SaaS landing pages using frosted-glass cards to highlight pricing or features
- Portfolio sites with layered image backgrounds and blurred content panels
- Agency websites where hero sections or popup overlays need a modern translucent look
Limitations
- This is a PRO-only feature – it is not available on the free version of Nexter Blocks.
- The effect needs a background image on the parent container to be visible; applying Background Filter over a solid color or no background produces no visual blur effect.
- Heavy blur values are a rendering cost the browser recalculates on scroll/resize; stacking the effect on many blocks on one page can add to page weight, so use it selectively rather than on every section.
Troubleshooting
- Background Filter option is missing. The feature requires the PRO version of Nexter Blocks – on the free version, the Background Filter settings icon under Advanced → Background will not appear.
- The effect is not visible after adjusting Blur. Confirm the container or column actually has a background image set (Advanced → Background) – Background Filter blurs an existing background image, it does not create one, so a block with only a solid background color will show no visible frosted-glass effect.
- Overlaid text is unreadable against the blurred background. Lower the Brightness value in the Background Filter popup, or increase Contrast, rather than reducing Blur – this keeps the glass effect while restoring text contrast, per the doc’s own verified filter-order behavior.
