Home » Blog » Web Tools » CSS Glassmorphism Generator

CSS Glassmorphism Generator

Glass Preview

Blur

Opacity

Border

Shadow

How to Apply Glassmorphism CSS in Elementor (Step-by-Step Guide)

This guide explains how to use the generated Glassmorphism CSS code and apply it to any container in Elementor.

1. Copy the Generated CSS Code

Open the Glassmorphism Generator tool and adjust the settings (blur, opacity, border, shadow).

Then click “Copy CSS” to copy the generated code.

You will get something like:

backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 35px 70px rgba(0,0,0,0.35);
border-radius: 18px;

2. Open Your Page in Elementor

Go to your WordPress dashboard:

Open Pages
Click Edit with Elementor
Select the container or section where you want to apply the glass effect

3. Add a Custom Class to Your Container

Click on your container → go to:

Advanced → CSS Classes

Add a class name, for example:

glass-effect

4. Add the CSS Code

Since the default Elementor setup does not include a built-in custom CSS field, you can use the free plugin:

👉 https://wordpress.org/plugins/custom-css-for-elementor/

Install and activate it.

Then:

Open your page in Elementor
Select the container
Go to Advanced tab
Open Custom CSS (via plugin)
Paste the generated CSS inside like this:

.glass-effect {
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 35px 70px rgba(0,0,0,0.35);
  border-radius: 18px;
}

5. Save and Preview

Click Update and preview your page.

You should now see a real glassmorphism effect applied to your container.

6. Recommended Background Setup

For the best visual result, use a background behind your glass container:

Gradient background (dark or colorful)
Or an image with soft contrast

Glass effects look best when there is visual contrast behind them.

Tips for Better Results

Increase blur for more “frosted glass” look
Lower opacity for stronger transparency
Add subtle shadows for depth
Avoid flat white backgrounds (glass effect will not be visible)

Result

You now have a fully working glassmorphism design system inside Elementor, ready to use for:

Hero sections
Cards
Pricing blocks
UI components
Landing pages