How to create a transparent or blurred card using CSS ? - GeeksforGeeks

29 Sep, 2021
In this article, we will create a transparent or blurred card using basic HTML and CSS properties. The blurred effect is also called the glass effect.
Approach: 
In the body tag, create the layout of the card.
Define the classes to each of the components to use the CSS properties.
To apply the glass or blur effect, use the backdrop filter property to blur the card.
Example: Create a glass or blur or transparent card using the above approach. As mentioned in the first step, we will create the layout of the card under the body tag.
HTML
<!DOCTYPE html><html>  <head>    <title>Page Title</title></head>  <body>    <div class="background">        <div class="card">            <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"                alt="image" />            <h1>GeeksforGeeks</h1>            <h3>Happy Coding</h3>        </div>    </div></body>  </html>
In the above code, we have created a nested div tag that holds an image and some text and assigned classes to these div tags that will be used for stylings. For Stylings we have used basic CSS properties.
Note: You can create another CSS file for stylings or can use the same HTML file to use the same HTML file write CSS properties under the style tag.
CSS
.background {    background-color: green;    height: 150px;    padding: 10px;}  .card {    margin-right: auto;    margin-left: auto;    width: 250px;    box-shadow: 0 15px 25px rgba(129, 124, 124, 0.2);    height: 300px;    border-radius: 5px;    backdrop-filter: blur(14px);    background-color: rgba(255, 255, 255, 0.2);    padding: 10px;    text-align: center;}  .card img {    height: 60%;}
In the above-mentioned code, under the card class, we have added backdrop filter property to blur which will be responsible for the blur effect. The CSS backdrop-filter property is used to apply effects to the area behind an element.
Note: For a better understanding of backdrop-filter property click on the mentioned link.
Complete Code:
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>Blur Card</title>    <style>        .background {            background-color: green;            height: 150px;            padding: 10px;        }          .card {            margin-right: auto;            margin-left: auto;            width: 250px;            box-shadow: 0 15px 25px rgba(129, 124, 124, 0.2);            height: 300px;            border-radius: 5px;            backdrop-filter: blur(14px);            background-color: rgba(255, 255, 255, 0.2);            padding: 10px;            text-align: center;        }          .card img {            height: 60%;        }    </style></head>  <body>    <div class="background">        <div class="card">            <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"                alt="image" />            <h1>GeeksforGeeks</h1>            <h3>Happy Coding</h3>        </div>    </div></body>  </html>
Output: 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?