Blur() - Function CSS

Syntax diagram of blur().

On the diagram, the terms in bold are the predefined terms in CSS, the others are described below:

• length is a positive or zero numeric value, followed by an absolute CSS dimension units.
  The asterisk indicates that the value can be omitted; in this case, it is assumed to be 0.

Description of the blur() function.

The blur() function applies a Gaussian blur effect to the visual of an element. Blur will be applied to both the background and the content of the element, regardless of the content: image, text, video, etc.

The blur() value can be used with the following properties:

• 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 blur() function.

• filter: blur(5px); n

  The n value indicates the amount of blur: the higher the value, the greater the blur will be. It is a positive or zero numeric value, with one dimension unit (see the CSS dimension units).
  Negative values and percentages are not allowed.

  If no value is specified, the default value is 0.

Examples of use of the function blur().

Blur a background without changing the foreground.

When a blur is applied to a clip, it also affects all child clips. In our example below, the element containing the text (which must remain sharp) cannot therefore be a child of the element containing the image (which must be blurred). The text should therefore be displayed below the image, but it has been repositioned to overlay the image (position:relative;).

Note: The backdrop-filter property provides a comparable result, but the blur will be limited to the surface of the element in the foreground.

Animation with the blur() function.

This is a small visual effect that encourages the reading of a text. Each of the words is in a span tag. The same animation is applied on these elements but with an increasingly long delay.

Simulator.

Used with filter, the blur() function blurs the element, whatever its nature (text, image, etc.).
With backdrop-filter, the blur() function can improve readability by blurring the background.

Blur() effect on text and image

Using blur()
to fade the background

Browsers compatibility with blur() function.

Apart from Internet Explorer, which had adopted a different syntax, most browsers correctly handle the graphical filters functions of which blur() is a part.

1

Graphic
filters

2

blur()
function

Estimated overall support.

96%

96%

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 blur() function.

• Filter Effects Module Level 1

  Regarding blur(). First version of the CSS module defining graphic filters, including the blur() function.
  

  October 25, 2012

  Working Draft.

  

  

  

See also: other effects and graphic filters.

The graphic effects available in CSS are more and more numerous. They are described in the specification Filter Effects Module.

Properties:

backdrop-filter

Applies a graphical filter to the clip behind the targeted clip.

color-interpolation

Defines the color space to use to calculate gradients, animations, and combinations with the alpha channel.

color-interpolation-filters

Defines in which color space the filter effects are calculated. Default is linearRGB.

filter

Applies a graphic filter (blur, contrast, brightness, etc.) to an element.

flood-color

Sets the color of fills and shading in the context of SVG filters.

flood-opacity

Sets the opacity of fills and shadings in the context of SVG filters.

lighting-color

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.

brightness()

Adjust the brightness of an image or any element. It is a graphic filter that is used with the filter property.

contrast()

Adjust the contrast of an image or any element. It is a graphic filter that is used with the filter property.

drop-shadow()

Defines the shadow of an element: dimensions, blur, color, etc. It's a graphic filter used with the filter property.

grayscale()

Converts an element to grayscale (graphic filter) in a less complete way. In the extreme, colors can be completely removed.

hue-rotate()

Changes the colors of an image by rotating hues (graphic filter).

invert()

Invert the colors of an image or any element. It is a graphic filter that is used with the filter property.

opacity()

Determines the transparency level of an element. It is a graphic filter used with the filter property.

saturate()

Sets the color saturation of an image or any element. It is a graphic filter used with the filter property.

sepia()

Apply a sepia effect to an image or any element. It is a graphic filter that is used with the filter property.