CSS opacity() Function (original) (raw)

Last Updated : 30 Aug, 2024

The **opacity() function is an inbuilt function that is used to apply a filter to the image to set the transparency of the image.

**Syntax:

opacity( amount )

**Parameters: This function accepts a single parameter **amount which holds the amount of transparency. The value of opacity is set in terms of number and percentage. The value 0% represents the complete transparent image and 100% represents the original image.

Below example illustrates the opacity() function in CSS:

**Example:

html `

CSS opacity() Function 
<style>
    h1 {
        color:green;
    }
    body {
        text-align:center;
    }
    .opacity_effect {
        filter: opacity(30%);
    }
</style>

GeeksforGeeks

<h2>CSS opacity() function</h2>

<img class="opacity_effect" src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GeeksforGeeks logo">

`

**Output:

**Supported Browsers: The browsers supported by opacity() function are listed below: