CSS brightness() Function
Example
Make an image brighter and darker than the original:
#img1 {
filter: brightness(150%);
}
#img2 {
filter: brightness(50%);
}
Try it Yourself »
filter: brightness(150%);
}
#img2 {
filter: brightness(50%);
}
More "Try it Yourself" examples below.
Definition and Usage
The CSS brightness() filter function adjusts the
brightness of an element.
- 0% will make the image completely black
- 100% (1) is default and represents the original image
- Values over 100% will provide brighter results
- Values under 100% will provide darker results
| Version: | CSS Filter Effects Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| brightness() | 18 | 12 | 35 | 6 | 15 |
CSS Syntax
brightness(amount)
| Value | Description |
|---|---|
| amount | Optional. Specifies the brightness as a number or percent. 0% will make the element completely black. 100% (1) is default and represents the original image (no effect). Values over 100% will provide brighter results |
More Examples
Example
Use brightness() with the backdrop-filter property:
div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: brightness(150%);
backdrop-filter: brightness(150%);
padding: 20px;
margin: 30px;
font-weight: bold;
}
Try it Yourself »
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: brightness(150%);
backdrop-filter: brightness(150%);
padding: 20px;
margin: 30px;
font-weight: bold;
}
Related Pages
CSS reference: CSS filter property.
CSS reference: CSS blur() function.
CSS reference: CSS contrast() function.
CSS reference: CSS drop-shadow() function.
CSS reference: CSS grayscale() function.
CSS reference: CSS hue-rotate() function.
CSS reference: CSS invert() function.
CSS reference: CSS opacity() function.
CSS reference: CSS saturate() function.
CSS reference: CSS sepia() function.