Design a Frosted Glass Effect using HTML and CSS

In this article, we will implement a frosted glass effect using the bootstrap 4 card class. The below image is the final output that you will get as the final result of this article.

Approach:

1. Styling the body:

Let's first set the background for your webpage. Write the below code under your head tag inside your <style> tag. If you have already set your background property (which you would have) then skip to the next section. If not, here you go.

You can read about the above properties here

2. Frost glass card:

Under the style tag, use the following code,

So what do we have here,

• box-shadow: This property is used to give a shadow-like effect to the frames of an element.
• background: Use this to make the element transparent and have the same background as your webpage (in the body class its necessary to have "background-attachment: fixed,")
• backdrop-filter: Use this to apply effects to the area behind an element. (Read this as well) Basically, this is the property that is reducing a lot of CSS styling here.
• margin: Margin and padding are according to your need.

Note: There have been issues with Mozilla's browser Firefox and in cases, the backdrop-filter doesn't work properly, chrome and edge work fine.

3. <div> in body:

Final Code:

Output: