Create an awesome Glassmorphism Effect using the Gutenberg Block Editor

This tutorial shows how to add a frosted glass effect to your website using the WordPress Gutenberg Block Editor.

What is Glassmorphism?

“Glassmorphism is a term used to describe UI design that emphasises light or dark objects, placed on top of colourful backgrounds. A background-blur is placed on the objects which allows the background to shine through – giving it the impression of frosted glass.”

Glassmorphism Video Tutorial

• Glassmorphism CSS code generator
• Get the CSS used in this tutorial

Timeline
0:00 – Intro
1:04 – CSS for the Glassmorphism
3:00 – Add the Background image with the Cover Block
3:45 – Add Columns
5:45 – Add the CSS class to the Column Box
6:45 – Apply the CSS from glassmorphism.com