How to Add Glassmorphism Effect in WordPress?

Table of Contents

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

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.

Get Instant Answers to all your questions about Nexter Blocks, Exensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!