brightness()
The brightness()
CSS <filter-function>
applies a linear multiplier value on an element or an input image, making the image appear brighter or darker.
Try it
Syntax
css
brightness(amount)
Values
amount
-
Brightness specified as a
<number>
or a<percentage>
. A value less than100%
darkens the input image or element, while a value over100%
brightens it. A value of0%
creates a completely black image or element, while a value of100%
leaves the input unchanged. Other values between0%
to100%
have a linear multiplier effect. Values greater than100%
are allowed, providing brighter results. The initial value for interpolation is1
. Negative values are not allowed. The default value, when nothing is specified, is1
.
The following are pairs of equivalent values:
css
brightness(0) /* Brightness is reduced to zero, so input turns black */
brightness(0%)
brightness(0.4) /* Brightness of input is reduced to 40%, so input is 60% darker */
brightness(40%)
brightness(1) /* Brightness of input is not changed */
brightness(100%)
brightness(2) /* Brightness of input is doubled */
brightness(200%)
Formal syntax
Examples
Applying brightness using the backdrop-filter property
This example shows how to apply the brightness()
filter to a paragraph via the backdrop-filter
CSS property.
CSS
css
.container {
background: url(image.jpg) no-repeat right / contain #d4d5b2;
}
p {
backdrop-filter: brightness(150%);
text-shadow: 2px 2px #ffffff;
}
Result
In this example, the colors in the area behind the <p>
element shift linearly. If the backdrop-filter
property was set to brightness(0%)
, the <div>
area with the <p>
element would have been black and hidden the image behind. At brightness(100%)
, the <div>
area color would be the same as the input #d4d5b2
, and the image behind would be completely transparent. With the brightness set to 150%
as in this example, the colors in the image behind are getting hidden by the brightness of the <div>
element.`
Applying brightness using the filter property
In this example, a brightness()
filter is applied to the entire element, including content, border, and background image via the filter
CSS property. The result shows three variations of different brightness values.
css
p:first-of-type {
filter: brightness(50%);
}
p:last-of-type {
filter: brightness(200%);
}
Applying brightness using the url() SVG brightness filter
The SVG <filter>
element is used to define custom filter effects that can then be referenced by id
. The <filter>
element's <feComponentTransfer>
primitive enables pixel-level color remapping.
In this example, to create a filter that darkens the content on which it is applied by 25% (i.e., 75% of the original brightness), the slope
attribute is set to 0.75
. We can then reference the filter by id
.
Given the following:
html
<svg role="none">
<filter id="darken25" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="linear" slope="0.75" />
<feFuncG type="linear" slope="0.75" />
<feFuncB type="linear" slope="0.75" />
</feComponentTransfer>
</filter>
</svg>
The following declarations produce similar effects:
css
filter: brightness(75%);
filter: url(#darken25); /* with embedded SVG */
filter: url(folder/fileName.svg#darken25); /* external svg filter definition */
In the images below, the first one has a brightness()
filter function applied, the second one has a similar SVG brightness function applied, and the third is the original image for comparison.
Specifications
Specification |
---|
Filter Effects Module Level 1 # funcdef-filter-brightness |
Browser compatibility
BCD tables only load in the browser
See also
- CSS filter effects module
- The other
<filter-function>
functions available to be used in values of thefilter
andbackdrop-filter
properties include: