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:
- 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...