How to Set Background Color Opacity without Affecting Text in CSS?

Last Updated : 14 Nov, 2024

Here are two approaches to set a background color with opacity in CSS without affecting the text.

1. Using RGBA color values

To set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can change the opacity of the text inside the element. CSS background property provides RGB color notations, which we will use to change background color opacity.

Syntax

background: rgba(red, green, blue, alpha)

html

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            background: rgb(0, 151, 19);
            padding: 10px;
            text-align: justify;
        }

        div.first {
            /*setting alpha = 0.1*/
            background: rgba(0, 151, 19, 0.1);
        }

        div.second {
            /*setting alpha = 0.3*/
            background: rgba(0, 151, 19, 0.3);
        }

        div.third {
            /*setting alpha = 0.6*/
            background: rgba(0, 151, 19, 0.6);
        }
    </style>
</head>

<body>
    <h2>Using RGBA color values:</h2>

    <div class="first">
        <p>This paragraph is shown at 10% opacity.</p>
    </div>

    <div class="second">
        <p>This paragraph is shown at 30% opacity.</p>
    </div>

    <div class="third">
        <p>This paragraph is shown at 60% opacity.</p>
    </div>

    <div>
        <p>This is default.</p>
    </div>
</body>

</html>

Output

file — Using RGBA color values Example Output

2. Using hsla value

Setting the opacity only on the background color in CSS can be achieved using HSLA color values. This method allows the background to be semi-transparent while keeping the text or other content inside the element fully opaque and unaffected.

Syntax

.element {
    /* Red background with 50% opacity */
    background: hsla(0, 100%, 50%, 0.5); 
    /* Text color remains fully opaque */
    color: #000; 
}

HTML

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

<head>
    <style>
        div {
            padding: 10px;
            text-align: justify;
            color: #000;
            /* Text color remains fully opaque */
        }

        div.first {
            /* Setting alpha = 0.1 with an orange background */
            background-color: hsla(30, 100%, 50%, 0.1);
        }

        div.second {
            /* Setting alpha = 0.3 with an orange background */
            background-color: hsla(30, 100%, 50%, 0.3);
        }

        div.third {
            /* Setting alpha = 0.6 with an orange background */
            background-color: hsla(30, 100%, 50%, 0.6);
        }

        div.default {
            /* Solid orange background without transparency */
            background-color: hsl(30, 100%, 50%);
        }
    </style>
</head>

<body>
    <h2>Using HSLA color values:</h2>

    <div class="first">
        <p>This paragraph is shown with 10% background opacity.</p>
    </div>

    <div class="second">
        <p>This paragraph is shown with 30% background opacity.</p>
    </div>

    <div class="third">
        <p>This paragraph is shown with 60% background opacity.</p>
    </div>

    <div class="default">
        <p>This is the default without transparency.</p>
    </div>
</body>

</html>