Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a transparent or blurred card using CSS ?

  • Last Updated : 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: 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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=
                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=
                alt="image" />
            <h1>GeeksforGeeks</h1>
            <h3>Happy Coding</h3>
        </div>
    </div>
</body>
  
</html>

Output: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!