This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

brightness()

Summary

Adjust the brightness of an element’s color, for use by the filter property. A value of 100% or decimal value of 1 leaves the image as is, while 0 produces black. Increasing the value from 1 or 100% brightens pixels from their original values.

This CSS property value is reflected in the following image:

filter: brightness(40%);
filter: brightness(0.4); /* same */

f17-boatonlake2.jpgf18-boatonlake2bright.jpg

Examples

The following example shows the difference between two images, where one has a brightness of 50%: filter brightness.png

<!DOCTYPE html>
<html>
  <head>
    <title>Filter example</title>
    <style>
      .foo {
        float: left;
      }

      .bar {
        -webkit-filter: brightness(50%);
      }
    </style>
  </head>
  <body>
    <img src="/logo/wplogo_transparent_xlg.png" class="foo" />
    <img src="/logo/wplogo_transparent_xlg.png" class="foo bar" />
  </body>
</html>

View live example

Notes

The CSS filter corresponds to this SVG filter definition, based on a variable amount passed to the function:

<filter id="brightness">
  <feComponentTransfer>
    <feFuncR type="linear" slope="[amount]"/>
    <feFuncG type="linear" slope="[amount]"/>
    <feFuncB type="linear" slope="[amount]"/>
  </feComponentTransfer>
</filter>

Related specifications

Filter Effects 1.0
Editor’s Draft
Filter Effects 1.0
Working Draft

See also

Related articles

Filters

External resources