opacity()
Quick Summary for opacity()
The
opacity()
CSS function applies transparency to the samples in the input image. Its result is a <filter-function>
.
Code Usage for opacity()
opacity(amount)
More Details for opacity()
opacity()
The opacity()
CSS function applies transparency to the samples in the input image. Its result is a <filter-function>
.
Note: This function is similar to the more established opacity
property. The difference is that with filters, some browsers provide hardware acceleration for better performance.
Syntax
opacity(amount)
Parameters
amount
The amount of the conversion, specified as a <number>
or a <percentage>
. A value of 0%
is completely transparent, while a value of 100%
leaves the input unchanged. Values between 0%
and 100%
are linear multipliers on the effect. The lacuna value for interpolation is 1
.
Examples
Examples of correct values for opacity()
opacity(0%) /* Completely transparent */ opacity(50%) /* 50% transparent */ opacity(1) /* No effect */
Specifications
Specification |
---|
Filter Effects Module Level 2 # funcdef-filter-opacity |
See also
<filter-function>
CSS opacity
property blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
saturate()
sepia()
Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)Français日本語Português (do Brasil)中文 (简体) Change language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline