Brightness and Contrast

CSS filters allow you to apply visual effects to page elements. Filters are usually applied to images, backgrounds, or frames, and sometimes other elements as well.

Filters are applied to an element before it is rendered, so the number of filters affects the page loading speed.

Filters are set using the filter property. Let’s start by getting to know more about them.

Brightness is set using brightness. Numeric values ranging from 0 or higher or percentages are allowed. When the filter is set to a value of 1 or 100%, the element will be displayed unchanged.

.effect {
  filter: brightness(2); /* Doubles the brightness */
  filter: brightness(10%); /* Reduces the brightness by 10% */
  filter: brightness(150%); /* Increases the brightness by 50% */
}

Contrast is set using contrast. Just like the brightness filter, you can specify either numbers or percentages for the value.

.effect {
  filter: contrast(0.5); /* Reduces the contrast by half */
  filter: contrast(50%); /* Also reduces the contrast by 50% */
 }

CSS filters are already supported in these browsers.