# brightness function

The `brightness` function allows you to change a brightness of a background image. The initial brightness of the background is determined by the `100%` value or `1`; as they decrease, the image brightness also decreases. Accordingly, when the value increases more than `100%`, the brightness increases. Negative values ​​are not applied, and an empty value is automatically treated as `1`.

## Syntax

`selector { filter: brightness(number); }`

## Example

Let's set the brightness of our image to `20%`:

`<div id="elem"></div>` `#elem { filter: brightness(20%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Now let's increase the brightness of the image to `120%`:

`<div id="elem"></div>` `#elem { filter: brightness(120%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's set our image to its original brightness:

`<div id="elem"></div>` `#elem { filter: brightness(1); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## See also

- the `blur` function
  that blurs a background
- the `contrast` function
  that sets a background contrast
- the `drop-shadow` function
  that sets a background shadow
- the `hue-rotate` function
  that sets a background hue
- the `invert` function
  that inverts background colors
- the `opacity` function
  that sets a background opacity
- the `sepia` function
  that converts a background to sepia
- the `background` property
  that is a shorthand property for a background
- the `background-image` property
  with that you can set a background image for a block
- the `filter` property
  that sets a background style

← →
↑
en ru