brightness() CSS Function
Description
The brightness()
CSS function applies a linear multiplier to an image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the image unchanged.
Syntax
brightness() = brightness( <number-percentage>? )
Values
- number-percentageA value of 100% or 1 leaves the image unchanged. Any values less than 100% (or less than 1) reduce the brightness of the image. Thus, 0 gives a completely black picture. Values greater than 100% (or greater than 1) increase the brightness of the image.
Example
<img class="brightness" src="images/nature.jpg" alt="Brightness Example">
<img class="brightness2" src="images/nature.jpg" alt="Brightness Example">
.brightness {
filter: brightness(175%);
}
.brightness2 {
filter: brightness(25%);
}
Browser Support
Desktop | |||||
X | 12 | 53 | 35 | 40 | 9.1 |
Tablets / Mobile | |||||
![]() |
|||||
53 | 53 | 35 | 41 | 9.3 | 6.0 |
Last updated by CSSPortal on: 1st December 2019
CSS Functions
- attr()
- blur()
- brightness()
- calc()
- circle()
- contrast()
- drop-shadow()
- ellipse()
- grayscale()
- hsl()
- hsla()
- hue-rotate()
- inset()
- invert()
- linear-gradient()
- matrix()
- matrix3d()
- opacity()
- perspective()
- polygon()
- radial-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- rgb()
- rgba()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- saturate()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- sepia()
- skew()
- skewX()
- skewY()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()