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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
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.
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: