How to Create a Transparent Button using HTML and CSS?

How to Create a Transparent or Blurred Card using CSS?

Last Updated : 18 Oct, 2024

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 CSS

Create 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

Output

How to Create a Transparent Button using HTML and CSS?

A

anuragsingh1022

Improve

Article Tags :

Similar Reads

How to create a transparent or blurred card using CSS ?

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. Appro

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

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

How to create Responsive Profile Card using HTML and CSS ?

In this article, we are going to create a profile card from where a user can check out the basic details of other users and connect with them through different handles as well as message the user. Approach:Set up HTML with a container div containing an image and content sections.Style the container,

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.

How to Create a Transparent iframe?

The <iframe> tag is an inline frame. It is used to embed another HTML page within the current HTML page. Syntax<iframe src = "URL"></iframe>ApproachIn this approach we will use iframe tag to create the iframe and A transparentÂ iframeÂ can be made by setting its background to transpa

How to create and style border using CSS ?

The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val

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

Create a Testimonial Card Using HTML and CSS

In this tutorial, we're going to create a testimonial card that can be used on websites to display feedback from clients or customers. Testimonials are an excellent way to add social proof to your site, enhancing credibility and trust among visitors. Weâ€™ll create a testimonial card with: A speech bu

How to create a hidden border using CSS properties ?

In this article, we will learn how to create a hidden border using CSS properties. In the following examples, both inline styling and style definition is used in the head section to define the hidden border. Approach: We will use two headings in which one will show the border color and the other wil