How to Create a Transparent or Blurred Card using CSS? Last Updated : 18 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Making a transparent or blurred card with CSS can give your website a modern look. This effect allows your content to shine while still showing some of the background. By using properties like backdrop-filter and light colors, you can create a card that looks great and adds style to your page.Approach to Create a Transparent or Blurred Card using CSSCreate a background area using div a green color. This will serve as the base for your card.Inside the background div, add another div for the card itself. This card will have a width, height, and rounded corners.Use CSS to add styles to the card, such as a shadow for depth, a blur effect for the background, and a semi-transparent white background color. This makes the card stand out against the background.Inside the card, include text elements like a heading and a subheading to convey your message. Style them to fit well within the card.Example: We will create a glass or blurred 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 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"> <h1>CODE WORLD</h1> <h3>Happy Coding</h3> </div> </div> </body> </html> Output: Output Comment More infoAdvertise with us Next Article How to Build a Card component using Tailwind CSS ? A anuragsingh1022 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Create a Transparent Button using HTML and CSS? Transparent buttons are a popular design choice in modern web development, as they create a sleek and minimalist look. By using CSS, you can easily create buttons with fully transparent or semi-transparent backgrounds. This article uses the background-color: transparent; property to design the trans 2 min read Create a transparent border with CSS In CSS, we can create a transparent border by using the border property in a nested div tag. The steps to create this are: Step 1: Create a nested div tag. Step 2: Specify the outer div tag's border-style to be solid and the border-width property can be of any desired size. Step 3: The size of the i 2 min read How to give text or an image transparent background using CSS ? In this article, we will know to make the text or image a transparent background using the CSS & will see its implementation through the example. The opacity property is used to set image or text transparent using CSS. The opacity attribute is used to adjust the transparency of text or pictures. 2 min read How to create Animated Blur Navbar using CSS? The Navbar is the main component of any website through which the user can navigate through all the components and sections of a site. That's why it is really important to have a well-designed navigation bar or menu. So today we will be looking at a navbar in which all the elements get blur except t 2 min read How to Build a Card component using Tailwind CSS ? In this article, we will learn about how to Build a card component using Tailwind CSS, Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small util 4 min read How to create a Hero Image using HTML and CSS ? A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The 2 min read Like