How to create a transparent or blurred card using CSS ?
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.
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.
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.