Open In App

CSS opacity() Function

Last Updated : 07 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

opacity( amount )

Parameters: This function accepts 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




<!DOCTYPE html> 
<html
  
<head
    <title>CSS opacity() Function</title
      
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
        .opacity_effect {
            filter: opacity(30%);
        }
    </style>
</head
  
<body
    <h1>GeeksforGeeks</h1
      
    <h2>CSS opacity() function</h2>
      
    <img class="opacity_effect" src
        alt="GeeksforGeeks logo"
</body
  
</html>


Output:

  

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

  • Google Chrome 18 and above
  • Edge 12 and above
  • Internet Explorer not supported
  • Firefox 35 and above
  • Safari 6 and above
  • Opera 15 and above

Previous Article
Next Article

Similar Reads

CSS | stroke-opacity Property
The stroke-opacity property is used to set the opacity of the color or pattern that is applied to the stroke of a shape. A decimal or percentage value could be used to make the stroke visible, invisible or semi-transparent. Syntax: stroke-opacity: [0-1] | &lt;percentage&gt; Parameters: This property accepts two types of parameters as mentioned abov
3 min read
CSS fill-opacity Property
The fill-opacity property is used to set the opacity of the paint server that is applied to the shape. basically is used to set the opacity level of the fill color of an SVG shape. It determines the transparency of the fill, with a value between 0 and 1, where 0 represents completely transparent and 1 represents completely opaque. Syntax: fill-opac
3 min read
How to change opacity of every data element on hover in a table using CSS ?
There is a Table made by using HTML in which data elements are set to a low opacity. The task is to change the opacity of a particular element when user hover over data elements. To make a table look better, we will use gradient colors to set backgrounds of the table data elements. In this approach, we will be using the opacity property of CSS to c
2 min read
How to set the opacity level for a division element using CSS ?
In this article, we will set the opacity of an element using CSS. Opacity is the property of an element that describes the transparency of the element. The opacity property is used to describe the transparency of the element. The value of opacity lies between 0.0 to 1.0 where a low value represents high transparency and a high value represents low
2 min read
Tailwind CSS Placeholder Opacity
This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. By using this class we can set the opacity of any placeholder text. In CSS, we do that by using the CSS Opacity property. Placeholder Opacity class: placeholder-opacity-0: Control the opacity of an element's placeholder color using the placeho
2 min read
Tailwind CSS Text Opacity
This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. By using this class we can set the opacity of any text. In CSS, we do that by using the CSS Opacity property. Text Opacity: text-opacity-0: Control the opacity of an element's placeholder color using the text-opacity-{amount} utilities. Note:
2 min read
Tailwind CSS Background Opacity
This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. The bg-opacity is the class of an element that describes the transparency of the element. It is the alternative to the CSS Opacity / Transparency. Background Opacity class: background-opacity-0: Control the opacity of an element's background usin
2 min read
Tailwind CSS Border Opacity
This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. The border-opacity is the class of an element that describes the transparency of the element. It is the alternative to the CSS Opacity / Transparency. Border Opacity class: border-opacity-0border-opacity-5border-opacity-10border-opacity-20border-
2 min read
Tailwind CSS Divide Opacity
This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can set the opacity of any divide. In CSS, we do that by using the CSS Opacity property. Divide Opacity Classes: divide-opacity-0: Control the opacity of an element’s placeholder color using the divide-opacity-{amount} util
1 min read
Tailwind CSS Ring Opacity
This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. By using this class we can set the opacity of any ring. In CSS, we do that by using the CSS Opacity property. Ring Opacity class: ring-opacity-0: Control the opacity of an element’s placeholder color using the ring-opacity-{amount} utilities.
1 min read