brightness()
The brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker. Its result is a <filter-function>.
Syntax
brightness(amount)
Parameters
amount-
The brightness of the result, specified as a
<number>or a<percentage>. A value under100%darkens the image, while a value over100%brightens it. A value of0%will create an image that is completely black, while a value of100%leaves the input unchanged. The lacuna value for interpolation is1.
Examples
Setting brightness using numbers and percentages
brightness(0%) /* Completely black */
brightness(0.4) /* 40% brightness */
brightness(1) /* No effect */
brightness(200%) /* Double brightness */
Specifications
| Specification |
|---|
| Filter Effects Module Level 2 # funcdef-filter-brightness |
Browser compatibility
Report problems with this compatibility data on GitHub| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
brightness() | ChromeFull support18 | EdgeFull support12 | FirefoxFull support35 | Internet ExplorerNo supportNo | OperaFull support15 | SafariFull support6 | WebView AndroidFull support4.4 | Chrome AndroidFull support53 | Firefox for AndroidFull support35 | Opera AndroidFull support14 | Safari on iOSFull support6 | Samsung InternetFull support6.0 |
Legend
- Full support
- Full support
- No support
- No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.