---
title: "How to Add Glassmorphism Effect in WordPress?"
url: https://nexterwp.com/docs/add-glassmorphism-effect-in-wordpress/
date: 2025-07-16
modified: 2026-05-16
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 design that works for cards, popups, headers,..."
image: https://nexterwp.com/wp-content/uploads/2025/07/Glassmorphism-featured-image-1024x538.jpg
word_count: 406
---

# How to Add Glassmorphism Effect in WordPress?

## Key Takeaways

- Nexter Blocks adds a glassmorphism effect to any block on a WordPress website, and the effect is available by default on all blocks from Nexter Blocks.
- Glassmorphism uses blurred backgrounds, transparency, and subtle borders to create a frosted-glass look for cards, popups, headers, or entire sections.
- The PRO version of the Nexter Blocks plugin is required, and the setup starts with the default WordPress Block editor plus a container block with a background image.

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

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