---
title: "How to Add Glassmorphism Effect in WordPress?"
url: https://nexterwp.com/docs/add-glassmorphism-effect-in-wordpress/
date: 2025-07-16
modified: 2026-03-31
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2025/07/Glassmorphism-featured-image-1024x538.jpg
word_count: 372
---

# How to Add Glassmorphism Effect in WordPress?

## Key Takeaways

- Nexter Blocks enables the addition of a glassmorphism effect to various elements in WordPress.
- The PRO version of Nexter Blocks is required to access the frosted glass effect feature.
- Users can adjust Blur, Brightness, Contrast, and Saturation levels to customize the glassmorphism effect.

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.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks ](http://wordpress.org/plugins/the-plus-addons-for-block-editor/)plugin installed and activated.

- This is a Premium feature, and you need the [PRO version of the Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

## Learn via Video Tutorial

https://www.youtube.com/watch?v=wlbr5IG4g-4

## 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.