Open In App

How to Set Transparent Background Color in CSS ?

Last Updated : 21 Mar, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Creating a simple transparent background involves styling HTML elements using CSS to achieve the desired visual effect. We can use different approaches to achieve this effect including, RGBA color values and the Opacity property.

Below are the approaches to set transparent background color in CSS:

Using RGBA Color Values

This approach involves using the RGBA color model to set a transparent background. You can adjust the alpha component to control the transparency level.

Example: This example shows the transparent background color using RGBA color values.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Transparent Background Color</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
        }

        .transparent-bg {
            width: 200px;
            height: 200px;
            background-color: rgba(255, 0, 0, 0.3);
            margin-top: 20px;
            border-radius: 10px;
            margin-left: 10vw;
            font-size: 30px;
            padding-top: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>Transparent Background Color 
              using RGBA Color Values
          </h3>
        <div class="transparent-bg">
            Element with transparent background color.
        </div>
    </div>
</body>

</html>

Output:

move2mvd
Output

Using Opacity Property

The opacity property allows you to make an entire element, including its background and content, transparent. Unlike RGBA, which affects only the background color, opacity applies to the entire element.

Example: This example shows the transparent background color using opacity property.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Transparent Background Example</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
        }

        .transparent-bg {
            width: 200px;
            height: 200px;
            background-color: rgba(108, 236, 23, 0.5);
            margin-top: 20px;
            border-radius: 10px;
            margin-left: 10vw;
        }
    </style>
</head>

<body>
    <div class="container">
        <h4>Transparent Background Color 
              in CSS with Opacity
          </h4>
        <div class="transparent-bg">
            Element with transparent background color.
        </div>
    </div>
</body>

</html>

Output:

move2kfjn
Output

Next Article

Similar Reads