The CSS brightness() Filter Function

This article demonstrates how to the use the CSS brightness filter function on elements with CSS filter. Included is code and examples.

The CSS brightness function is a value of the CSS filter property. Brightness applies a linear multiplier to the target HTML element. This can also include an image.

Syntax

filter: brightness(value);

Parameters

  • value (required)

The value parameter of brightness is a percentage or a number. A value under 100% will darken the element, while on the other hand, a value over 100% will brighten it. Negative values are not allowed. The default value for brightness is 1 or 100% and will leave the element unchanged. For interpolation, the default value is 1.

Examples

The examples below use numbers and percentages values for the parameter of the brightness filter function. 

brightness(1)     /* No effect */
brightness(25%)   /* A brightness of 25% */
brightness(135%)  /* A brightness of 135% */
brightness(0.5)   /* A brightness of 0.5 or 50% */
brightness(17%)   /* A brightness of 17% */
brightness(1.5)   /* A brightness of 1.5 or 150% */

Usage

You can apply the brightness filter to an image or any other element using CSS selectors.

#element-id {
  filter: brightness(50%);
}

img {
  filter: brightness(0.5);
}

Try It

The CSS Brightness Filter Function
The CSS Brightness Filter Function

HTML

<div class="wrapper">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" />
</div>

CSS

.wrapper img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 20px;
  vertical-align: middle;
}

.wrapper img:nth-child(1) {
  filter: brightness(50%);
}

.wrapper img:nth-child(2) {
  filter: brightness(100%);
}

.wrapper img:nth-child(3) {
  filter: brightness(150%);
}

html {
  text-align: center;
  min-height: 100%;
  background: linear-gradient(white, #ddd);
}

.wrapper {
  width: 100%;
  background: transparent;
  text-align: center;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
}

Specifications

W3C CSS Filter Effects Module Level 1
#funcdef-filter-brightness

Other Filter Functions