Adding a frosted glass background for your website can be a fresh design element that makes your backgrounds and text stand out in a unique way. The trick to creating a frosted glass background effect is to blur the background behind the target element. In other words, we want to blend two elements in such a way that the target background looks like frosted glass that reveals a blurry version of the background behind the element.
In this tutorial, we are going to show you three methods for creating a frosted glass background design in Divi. First, we’ll introduce the powerful backdrop-filter CSS property that will create frosted backgrounds with a single line of CSS. Then we’ll show you two other methods that involve layering Divi elements (with background styles and filters) to create beautiful frosted background designs.