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 the Nexter Blocks.
Learn via Video Tutorial
How to Activate the Glassmorphism Effect?
There are no settings to activate this option. The glassmorphism effect is available by default on all blocks from Nexter Blocks.
Key Features
- Add frosted glass effect – Add a frosted glass background effect to any Nexter Blocks block. Use this when you want a content card or section to appear translucent over a background image, creating depth without additional design software.
Add a Glassmorphism Effect in WordPress
To add a glassmorphism effect to any block from Nexter Blocks, follow the 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.
2. Add a block from Nexter Blocks. For example, add the Infobox block to see the effect in action.
3. After adding your content, go to Advanced → Background.
4. Then go to Background Filter and click the settings icon.
5. In the popup, adjust the Blur level to create the glassmorphism effect.
You will find additional options to refine the effect:
Brightness – Adjust the brightness level of the glassmorphism background. Use a lower value to keep overlaid text readable against bright background images.
Contrast – Adjust the contrast level of the glassmorphism background.
Saturation – Adjust the saturation level of the glassmorphism background.
Saturation – Adjust the color saturation level of the glassmorphism background.
Note: For the Container block, you’ll find this option under the Style tab.
Your block now displays the glassmorphism effect.
