amount

Brightness specified as a <number> or a <percentage>. A value less than 100% darkens the input image or element, while a value over 100% brightens it. A value of 0% creates a completely black image or element, while a value of 100% leaves the input unchanged. Other values between 0% to 100% have a linear multiplier effect. Values greater than 100% are allowed, providing brighter results. The initial value for interpolation is 1. Negative values are not allowed. The default value, when nothing is specified, is 1.

The following are pairs of equivalent values:

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%)

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

This example shows how to apply the brightness() filter to a paragraph via the backdrop-filter CSS property.

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.`

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.

p:first-of-type {
  filter: brightness(50%);
}
p:last-of-type {
  filter: brightness(200%);
}

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:

<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:

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.

• CSS filter effects module
• The other <filter-function> functions available to be used in values of the filter and backdrop-filter properties include:
  • blur()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()