Brightness() - Function CSS

brightness()

Summary of characteristics of the brightness() function

Quick description
Adjusts the brightness of an element (graphic filter).
Status
Standard
Percentages
Calculated in relation to the original brightness: 100% does not produce a change in brightness.
W3C Module
Filter Effects Module
References (W3C)
Document status: WD (Working Draft)

Description of the brightness() function..

The brightness() function allows you to adjust the brightness of an element. It is most often used on an image, but can work on any type of element.

brightness() applies a multiplier to each pixel. The effect will therefore be zero on black, which already correspond to the value 0.

The brightness() function can be used with:

  • backdrop-filter : Applies a graphical filter to the clip behind the targeted clip.
  • filter : Applies a graphic filter (blur, contrast, brightness, etc.) to an element.

Syntaxes of the brightness() function.

  • filter: brightness(50%); n

    n indicates the importance of the change in brightness. This can be an increase or decrease in brightness.

    It is a unitless numerical value, or a percentage.

    1. 0 indicates a total reduction in brightness (a black image).
    2. A value between 0 and 1, or a percentage between 0% and 100%, indicates a more or less important reduction of luminosity.
    3. 1 or 100% does not cause any change in brightness.
    4. A value greater than 1, or a percentage greater than 100%, corresponds to an increase in brightness.
    5. The default, when the parentheses are empty, is 100%.
    6. Negative values are not allowed.

    If no value is specified, the default value is 1, so the brightness of the element is not changed.

Simulator: brightness() used with filter.

filter :
Brightness() effect on gray text
Brightness() effect on black text
Brightness adjustment with brightness()

Simulator : brightness() used with backdrop-filter.

When a text is on a confusing background, reading is laborious. The brightness() function used with backdrop-filter can greatly improve readability by darkening the background if, as in our example, the text is in light color.

backdrop-filter :
Fade the background with brightness()
Using brightness()
to improve text readability

Browsers compatibility with brightness() function.

Graphic filters have long been well rendered by browsers. The brightness() function, which is one of these filters, is itself well recognized by current browsers.

Column 1
Capacité à appliquer un filtre sur un élément, avec la propriété filter.
Column 2
Support by browsers for the brightness() function to modify the brightness of text or an image.
1
Graphic
filters
2
brightness()
function
Estimated overall support.
96%
95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse

Historic of the brightness() function.

  • Filter Effects Module Level 1

    First version of the specification module defining graphic filters. The brightness() function is described in this module.
    WD
    October 25, 2012
    Working Draft.
    CR
    PR
    REC

See also: other graphic effects.

The following is a list of the properties and functions described in the Filter Effects Module specification.

Properties:

backdrop-filter
Applies a graphical filter to the clip behind the targeted clip.
color-interpolation
Langue française
Defines the color space to use to calculate gradients, animations, and combinations with the alpha channel.
color-interpolation-filters
Langue française
Defines in which color space the filter effects are calculated. Default is linearRGB.
filter
Langue française
Applies a graphic filter (blur, contrast, brightness, etc.) to an element.
flood-color
Langue française
Sets the color of fills and shading in the context of SVG filters.
flood-opacity
Langue française
Sets the opacity of fills and shadings in the context of SVG filters.
lighting-color
Langue française
Sets the color of the lighting in the context of an SVG filter.

Functions:

blur()
blur() is a graphical filter that can be used with the filter property. The function applies a blur effect to the clip.
contrast()
Langue française
Adjusts the contrast of an element (graphic filter).
drop-shadow()
Sets the shadow of an element: dimensions, blur, color (graphic filter).
grayscale()
Langue française
Converts an element to grayscale (graphic filter) in a less complete way. In the extreme, colors can be completely removed.
hue-rotate()
Langue française
Changes the colors of an image by rotating hues (graphic filter).
invert()
Langue française
Inverts the colors of an element (graphic filter).
opacity()
Langue française
Determines how transparent an element is (graphic filter).
saturate()
Langue française
Sets the color saturation of an element (graphic filter).
sepia()
Langue française
Applies a sepia effect to an element (graphics filter).