CSS brightness() Function

CSS brightness() Function

The CSS brightness() function makes an element or image appear brighter or darker. It is used with the filter and backdrop-filter properties and accepts a number or percentage to control the brightness level. A value of 100% preserves the original appearance, lower values darken the content, and higher values brighten it.

Syntax

brightness()
brightness(number)
brightness(percentage)

The brightness() function accepts one optional number or percentage.

For example:

.example {
  filter: brightness(150%);
}

This increases the brightness multiplier to 150% of its original value.

The same effect can be written using a number:

.example {
  filter: brightness(1.5);
}

When the argument is omitted, the default is 1, equivalent to 100%, which leaves the content unchanged.

.example {
  filter: brightness();
}

The function returns a CSS filter function value.

Parameters

The brightness() function accepts one optional parameter.

Valid examples include:

brightness()
brightness(0)
brightness(0.5)
brightness(1)
brightness(1.5)
brightness(2)
brightness(50%)
brightness(150%)
brightness(calc(50% + 25%))
brightness(var(--brightness-level))

Negative values are invalid:

filter: brightness(-1);

Length values are also invalid:

filter: brightness(10px);

Unlike blur(), which accepts a length, brightness() requires a number or percentage.

How It Works

The brightness() function applies a linear multiplier to the red, green, and blue color channels of the rendered content.

Values below 1 reduce the color channel values, making the content darker.

Values above 1 increase the color channel values, making the content brighter.

For example:

.dark {
  filter: brightness(0.5);
}
.normal {
  filter: brightness(1);
}
.bright {
  filter: brightness(1.5);
}

The first element appears darker, the second retains its original appearance, and the third appears brighter.

Brightness adjustments affect the rendered colors rather than changing the underlying HTML or image file.

At brightness(0), the visible content becomes black while its transparency is preserved.

At high brightness values, color channels may reach their maximum display values, causing bright areas to lose detail.

The effect does not change an element's dimensions or position in the document layout.

Brightness Values

Brightness can be expressed as a number or an equivalent percentage.

Values greater than 100% are permitted. There is no fixed maximum input value.

However, increasing the multiplier does not guarantee that every pixel will continue getting visibly brighter. Color channels cannot exceed their maximum display values.

Numbers and percentages can be used interchangeably:

filter: brightness(0.75);
filter: brightness(75%);

Both declarations produce the same brightness adjustment.

Using brightness() with filter

The filter property applies the brightness adjustment directly to an element and its rendered content.

For example:

<div class="brightness-box">Example Content</div>

.brightness-box {
  padding: 20px;
  background-color: #0066cc;
  color: #fff;
  filter: brightness(75%);
}

The background and text are both included in the brightness adjustment.

Images can also be adjusted:

img {
  filter: brightness(120%);
}

This increases the brightness of all images matched by the selector.

To adjust only a background image without changing the text above it, apply the filter to a separate element or pseudo-element.

For example:

.panel {
  position: relative;
  isolation: isolate;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #0066cc, #66ccff);
  filter: brightness(60%);
}

The pseudo-element is darkened while the panel's text remains unaffected.

Using brightness() with backdrop-filter

The backdrop-filter property adjusts the brightness of the area behind an element rather than changing the element's own content.

For example:

.overlay {
  background-color: rgb(255 255 255 / 15%);
  backdrop-filter: brightness(50%);
}

The backdrop visible through the overlay becomes darker.

To brighten the backdrop instead:

.overlay {
  background-color: rgb(255 255 255 / 15%);
  backdrop-filter: brightness(150%);
}

The backdrop becomes brighter while the overlay's own text remains unaffected by the filter.

Compare the two properties:

.element {
  filter: brightness(50%);
}
.overlay {
  backdrop-filter: brightness(50%);
}

The first declaration darkens the rendered element. The second darkens the visible backdrop behind the overlay.

A transparent or partially transparent background makes the backdrop adjustment easier to see.

Combining Filter Functions

The brightness() function can be combined with other CSS filter functions.

For example:

.example {
  filter: brightness(120%) contrast(110%);
}

This increases brightness and contrast.

Brightness can also be combined with grayscale:

.example {
  filter: grayscale(100%) brightness(80%);
}

This removes the colors and darkens the resulting image.

Another example combines brightness with blur:

.example {
  filter: brightness(70%) blur(3px);
}

The element becomes darker and slightly blurred.

Multiple filter functions are separated by spaces and applied in the order they appear.

Changing the order may produce different results, especially when combining brightness with functions such as contrast() or invert().

For example:

.first {
  filter: brightness(150%) contrast(120%);
}
.second {
  filter: contrast(120%) brightness(150%);
}

The results may differ because the first function changes the input received by the second.

Using Custom Properties

CSS custom properties can control brightness values without repeating the filter declaration.

For example:

:root {
  --brightness-level: 80%;
}
.example {
  filter: brightness(var(--brightness-level));
}

The element displays at 80% brightness.

Changing the custom property changes the result:

:root {
  --brightness-level: 140%;
}

The element becomes brighter.

Custom properties can also be defined individually:

.card {
  --brightness-level: 100%;
  filter: brightness(var(--brightness-level));
}
.card.dimmed {
  --brightness-level: 60%;
}
.card.highlighted {
  --brightness-level: 130%;
}

This allows multiple elements to share the same filter rule while using different brightness values.

The custom property must resolve to a valid non-negative number or percentage.

Transitions and Animations

The brightness() function can be animated to create smooth changes between dark and bright states.

For example:

.brightness-hover {
  filter: brightness(100%);
  transition: filter 0.3s ease;
}
.brightness-hover:hover {
  filter: brightness(130%);
}

The element becomes brighter when the pointer moves over it.

A dark-to-normal transition can be created similarly:

.brightness-reveal {
  filter: brightness(50%);
  transition: filter 0.3s ease;
}
.brightness-reveal:hover {
  filter: brightness(100%);
}

CSS animations can also change brightness over time:

@keyframes brightness-pulse {
  from {
    filter: brightness(70%);
  }
  to {
    filter: brightness(130%);
  }
}
.animated-brightness {
  animation: brightness-pulse 2s ease-in-out infinite alternate;
}

For users who prefer reduced motion, consider disabling nonessential animations:

@media (prefers-reduced-motion: reduce) {
  .animated-brightness {
    animation: none;
  }
}

Brightness changes should not make text or interactive controls difficult to see.

Example

The following example compares five brightness values using the same colored design.

Each box uses the same background colors, allowing the brightness differences to be seen directly.

HTML:

<div class="brightness-demo">
  <div class="brightness-item">
    <span>brightness(25%)</span>
    <div class="brightness-sample brightness-one"></div>
  </div>
  <div class="brightness-item">
    <span>brightness(50%)</span>
    <div class="brightness-sample brightness-two"></div>
  </div>
  <div class="brightness-item">
    <span>brightness(100%)</span>
    <div class="brightness-sample brightness-three"></div>
  </div>
  <div class="brightness-item">
    <span>brightness(150%)</span>
    <div class="brightness-sample brightness-four"></div>
  </div>
  <div class="brightness-item">
    <span>brightness(200%)</span>
    <div class="brightness-sample brightness-five"></div>
  </div>
</div>

CSS:

.brightness-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.brightness-item {
  width: 140px;
  text-align: center;
}
.brightness-item span {
  display: block;
  margin-bottom: 10px;
}
.brightness-sample {
  height: 90px;
  border-radius: 4px;
  background: linear-gradient(135deg, #0066cc 0 33%, #cc3366 33% 66%, #66aa33 66%);
}
.brightness-one {
  filter: brightness(25%);
}
.brightness-two {
  filter: brightness(50%);
}
.brightness-three {
  filter: brightness(100%);
}
.brightness-four {
  filter: brightness(150%);
}
.brightness-five {
  filter: brightness(200%);
}

The first two samples appear darker than the original. The third retains the original colors, while the fourth and fifth become progressively brighter.

The effect changes the rendered appearance without modifying the gradient's original color values.

Hover Example

This example uses brightness() to create an interactive hover effect.

The button starts slightly darkened and becomes brighter when hovered or focused using the keyboard.

HTML:

<button class="brightness-button" type="button">Hover or Focus Me</button>

CSS:

.brightness-button {
  padding: 12px 24px;
  border: 0;
  background-color: #0066cc;
  color: #fff;
  cursor: pointer;
  filter: brightness(85%);
  transition: filter 0.3s ease;
}
.brightness-button:hover,
.brightness-button:focus-visible {
  filter: brightness(120%);
}
@media (prefers-reduced-motion: reduce) {
  .brightness-button {
    transition: none;
  }
}

Move the pointer over the button or use the Tab key to focus it. The button becomes brighter, then returns to its original appearance when the interaction ends.

Common Uses

The brightness() function is useful for adjusting the appearance of images, backgrounds, and interface elements.

For example, an image can be darkened slightly until the pointer moves over it:

.image-card img {
  filter: brightness(80%);
  transition: filter 0.3s ease;
}
.image-card:hover img {
  filter: brightness(100%);
}

The image returns to its original brightness on hover.

Limitations

The brightness() function has several important limitations.

• It accepts only one optional number or percentage.
• Negative values are invalid.
• Length and angle values are not supported.
• It affects rendered colors but does not change an element's layout dimensions.
• Applying filter to a container also affects its rendered descendants.
• Very high brightness values can cause color channels to reach their maximum display values, reducing visible detail.
• It does not change the source image or original CSS color declarations.
• Brightness adjustments can reduce text contrast and readability.

For example:

.example {
  filter: brightness(150%);
}

This is valid.

However:

.example {
  filter: brightness(-50%);
}

This is invalid because negative brightness values are not permitted.

Likewise:

.example {
  filter: brightness(10px);
}

This is invalid because the function does not accept lengths.

To restore the original brightness, use brightness(1), brightness(100%), or filter: none when no other filters need to remain active.

Browser Support

The brightness() function is Baseline Widely available and has been supported across major browser engines since September 2016.

It is widely supported when used with the filter property.

The backdrop-filter property has a separate browser compatibility history, so its support should be checked independently.

For a basic fallback, provide a normal appearance before applying the filter:

.example {
  filter: none;
  filter: brightness(80%);
}

Browsers that do not support the brightness declaration retain the earlier valid value.

You can also check support using @supports:

@supports (filter: brightness(80%)) {
  .example {
    filter: brightness(80%);
  }
}

For backdrop brightness, check the appropriate property:

@supports (backdrop-filter: brightness(80%)) {
  .overlay {
    backdrop-filter: brightness(80%);
  }
}

For current compatibility information, visit Can I Use? and search for CSS Filters or backdrop-filter.

Specifications

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

The specification defines brightness() as a filter function that applies a linear multiplier to the input image's color channels.

Related CSS features include the filter and backdrop-filter properties and filter functions such as blur(), contrast(), grayscale(), and saturate().