Want to give your WordPress site a modern, frosted-glass look? Glassmorphism uses blurred backgrounds, transparency, and subtle borders to create a sleek, layered look that’s both eye-catching and elegant. Whether you’re designing cards, popups, headers, or entire sections, this effect can instantly elevate your site’s visual appeal.
With Nexter Blocks, you can easily add a glassmorphism effect to different elements of your WordPress website.
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; it will be enabled by default for all the blocks from Nexter Blocks.
Key Features
- Add frosted glass effect – You can easily add a frosted glass effect to any blocks.
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, select the appropriate layout.
2. Then add a background image to the container or column and do 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. Then add a block from Nexter Blocks, for instance, we’ll use the Infobox block.
3. After adding the necessary content, go to Advanced > Background.
4. Then go to Background Filter and click on the settings icon.
5. In the pop-up, you have to adjust the Blur level to create the glassmorphism effect.
You’ll find some other options as well to adjust the glassmorphism effect.
Brightness – From here, you can adjust the brightness level of the glassmorphism background.
Contrast – From here, you can adjust the contrast level of the glassmorphism background.
Saturation – From here, you can adjust the saturation level of the glassmorphism background.
Saturation – From here, you can adjust the color saturation level of the glassmorphism background.
Note: For the Container block, you’ll find this option under the Style tab.
Now you’ll see a beautiful glassmorphism effect on your block.
