Glassmorphism: Recreating the Popular Design Trend in GenerateBlocks

One of the more popular visual trends in web design over the past few years has been glassmorphism. You’ve likely seen this frosted-glass look in UI elements from Apple, Microsoft, and other modern interfaces. Recently, I explored how to recreate this effect using GenerateBlocks — and it’s surprisingly simple.

Here’s a step-by-step breakdown of how to build the glassmorphism effect directly inside GenerateBlocks.

Step 1: Set Up the Base Container

Start with a blank page in WordPress using the block editor and GenerateBlocks.

1. Insert a Container block.
2. Add spacing — set the top and bottom padding to 10rem, and the left and right padding to 1rem.
3. This will serve as the background layer, similar to a full-width hero section.

Now, give this outer container a background image. Abstract images work great here, like blurred shapes or gradients. In my example, I used a graphic with overlapping blue circles — these really help accentuate the glass effect.

Step 2: Add an Inner Content Container

Inside your outer container, add a second container that will actually carry the glassmorphism effect.

Inside this inner container, add your content:

• An H1: “This is a cool web design effect”
• A smaller subheading: “Glassmorphism”
• Some placeholder paragraph text
• A button (which I styled with one of my global classes)

Be sure to:

• Center all your text
• Set all text colors to white
• Use a flex layout set to column and align to center
• Restrict the max width of this inner container to around 1000px
• Add internal padding — I used 3rem all around

This gives you a centered, well-spaced block of content to style.

Step 3: Create the Glassmorphism Effect with a Class

Create a custom class for this inner container — I called mine glass.

Then head into the Style tab and apply the following:

Background

• Set a background color to white with 50% opacity.

Border

• Add a 2px solid border, white
• Lower the border opacity to around 68%
• Optional: add 1rem of border-radius for soft edges

Box Shadow

Still inside the glass class, go to the Effects tab:

• Add a box shadow
• Set X and Y offsets to 0
• Set the blur to 20px
• Set spread to 0
• Increase opacity to make it visible but subtle

This gives the container a nice lift off the background.

Backdrop Filter

Still under Effects, scroll down and add a Backdrop Filter.

• Use the value: blur(10px)
• You can tweak this number — 5px to 15px typically works well

This is the most critical part of achieving the glass look — it blurs whatever is behind the container.

Step 5: Optional Enhancements

To soften the edges further, lower the background opacity to as low as 10%. This can make the container more transparent, depending on your visual preference.

You can also:

• Reduce the border to 1px and drop its opacity even further (e.g., 30%)
• Add an Inset Box Shadow using white with low opacity (~36%)
  • X and Y offsets: 0
  • Blur: 30–50px
  • Spread: 0
  • Mark it as “inset”

This creates a subtle glow on the inside edge — a nice enhancement if you want a more defined frosted-glass look.

Step 6: Test It on the Front End

Publish the page and preview it live.

You’ll notice the container beautifully blurs the background image, especially with abstract or colorful shapes behind it. You can experiment by swapping in a photo background — like a cityscape — and the effect still holds up.

The beauty of this approach is that it’s built using a reusable global class. You can apply this glass class to other containers throughout your site to recreate the same glassmorphism effect wherever you need it.

Final Thoughts

Glassmorphism is a clean, modern design technique that works especially well for tech-forward websites or interfaces looking for a little extra polish. With GenerateBlocks, you don’t need custom code — just a few style tweaks and a backdrop filter.

If you’re building modern layouts in WordPress, give this effect a try. Tweak it to your taste and see how it fits your design.