CSS brightness()

christian.dinh's avatar
christian.dinh's avatar
christian.dinh
Published Jul 12, 2021Updated Nov 10, 2023
Contribute to Docs

Defines the brightness or darkness of an element.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours

Syntax

filter: brightness(<value>);

where a required <value> can be one of the following:

  • Number value: 0, 1.4
  • Percentage value: 100%, 50%

Example

The example below applies the brightness filter to the Codecademy banner icon image.

.banner-image {
  filter: brightness(150%);
}

CSS brightness filter example

Here, the original image is on the left and the image on the right has the filter set at brightness(150%).

All contributors

Contribute to Docs

Learn CSS on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours