How to Set Transparent Background Color in CSS ?

Last Updated : 21 Mar, 2024

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:

Table of Content

Using RGBA Color Values
Using RGBA

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:

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>