brightness()

The CSS brightness() function with the filter and backdrop-filter properties adjusts an element’s brightness so it looks lighter or darker. Specifically, brightness() changes an element’s lightness while keeping hue and saturation the same.

.brighten img {
  filter: brightness(1.5);
}

.darken img {
  filter: brightness(0.4);
}

/* Hover to reset to normal */
.card:hover img {
  filter: brightness(1);
}

The brightness() function is defined in the Filter Effects Module 1 specification.

Syntax

The official syntax for the brightness() function is:

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

Or, in slightly simpler terms:

filter: brightness(<amount>);

Let’s get more specific about what we mean by “<amount>” in the next section.

Argument

/* Using percentages (0% to more than 100% range) */
filter: brightness(0%); /* a completely black element */
filter: brightness(50%); /* a partially dark element - 50% dimmed */
filter: brightness(100%); /* no change */
filter: brightness(150%); /* the element is 1.5 times brighter */

/* Using numbers (0 to more than 1 range) */
filter: brightness(0); /* a completely black element */
filter: brightness(0.5); /* a partially dark element - 50% dimmed */
filter: brightness(1); /* no change */
filter: brightness(1.5); /* the element is 1.5 times brighter */

/* Using no argument */
filter: brightness(); /* no change */

The brightness() function takes a single positive argument that specifies how bright or dark the element will be. We can pass either percentage or decimal numbers, where…

• 0% (or 0) makes the element completely black.
• 100% (or 1) leaves the element unchanged.
• Above 100% or 1 increases the brightness.
• Below 100% or 1 darkens the element.

Negative values are invalid. If no argument is provided, then the element stays the same, so it is the same as passing either 100% or 1.

Basic usage

A common use case for the brightness() function is toggling between a button’s hover and active states. Transitioning the brightness of a button to a lighter value is more efficient than changing both its background and text color or decreasing the opacity, which depends on the background element’s color.

/* 1.1 = 10% brighter, which makes the button glow */
.btn-light:hover {
  filter: brightness(1.1);
}

/* 0.8 = 20% darker, which creates a "pushed" effect */
.btn-dark:active {
  filter: brightness(0.8);
}

This way, the button changes color depending on the interaction: brightened when hovered and dimmed when clicked.

Making media adaptive to dark mode

It’s common to offer users a “dark mode” color scheme option to reduce eye strain in low-light conditions. That said, some assets like images can look brighter in dark mode against darker background colors, which could result in more eye strain.

To solve this, we can globally dim an image’s brightness, say, by 30% when dark mode is on:

/* Apply brightness filter ONLY in dark mode */
@media (prefers-color-scheme: dark) {
  img {
      filter: brightness(0.7);
  }
}

And we can restore full brightness when a user hovers on the image to show a change in state:

/* Restore brightness when the user focuses on the image */
@media (prefers-color-scheme: dark) {
  /* ... */
  img:hover {
    filter: brightness(1);
  }
}

The same thing is true when swapping black text on a white background with white text on a black background: the contrast between white text and a black background might be too jarring, and we can dim that a bit as detailed in this article.

Focus and modal backdrop effects

When a modal component is in an open state — i.e., the element “pops” on top of the rest of the page content — the standard approach is to cover the rest of the page content with a blurred, semi-transparent element, giving the modal more focus.

Nowadays, we can get rid of the extra element using the ::backdrop pseudo-element in combination with the blur() and brightness() functions to achieve a dimming effect.

dialog::backdrop {
  backdrop-filter: brightness(0.2) blur(2px);
  transition: backdrop-filter 300ms;
}

You can toggle the filters to see what the backdrop would look like with both:

Specification

The brightness() function is defined in the Filter Effects Module 1 specification, which is currently in Editor’s Draft.

Browser support

The CSS brightness() function is currently supported on all modern browsers.

More information

Related