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