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

filter: brightness(1);

filter: brightness(1.75);

filter: brightness(50%);

filter: brightness(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

brightness(amount)

Values

amount Optional

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 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()     /* Brightness of input is not changed */
brightness(1)
brightness(100%)

brightness(2)   /* Brightness of input is doubled */
brightness(200%)

Formal syntax

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

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

.container {
  background: url("be_fierce.jpg") no-repeat right / contain #d4d5b2;
}
p {
  backdrop-filter: brightness(150%);
  text-shadow: 2px 2px white;
}

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.

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:

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

Specifications

Browser compatibility

See also

• 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()