Design a Frosted Glass Effect using HTML and CSS
Last Updated :
11 Feb, 2021
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.
CSS
body {
background-image : url ( 'background.jpg' );
background-repeat : no-repeat ;
background- size : 100% ;
background-attachment : fixed ;
}
|
2. Frost glass card: Under the style tag, use the following code,
CSS
.card {
box-shadow: 0 0 5px 0 ;
background : inherit;
backdrop-filter: blur( 10px );
<!-- margin : 100px ; according to your need-->
}
|
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:
HTML
< body >
< div class = "container" >
< div class = "card card-body" style = "justify-content: center;" >
</ div >
</ div >
</ body >
|
Final Code:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet" href =
< style >
body {
background-image: url(
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
}
h1 {
color: white;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
.card {
top: 50%;
box-shadow: 0 0 5px 0;
background: inherit;
backdrop-filter: blur(10px);
margin: 100px;
text-align: center;
}
</ style >
</ head >
< body >
< div class = "container" >
< div class = "card card-body"
style = "justify-content: center;" >
< h1 >GeeksforGeeks</ h1 >
</ div >
</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...