Blur() - Function CSS

Syntax diagram of blur().

• On the diagram, length is a positive or zero numeric value, followed by an absolute CSS dimension units.

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

Syntax 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 how to use 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 of 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 : the blur() function used with filter and backdrop-filter.

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.

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

Blur() function historic.

• Filter Effects Module Level 1

  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:

brightness()

Adjusts the brightness of an element (graphic filter).

contrast()

Adjusts the contrast of an element (graphic filter).

drop-shadow()

Sets the shadow of an element: dimensions, blur, color (graphic filter).

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()

Inverts the colors of an element (graphic filter).

opacity()

Determines how transparent an element is (graphic filter).

saturate()

Sets the color saturation of an element (graphic filter).

sepia()

Applies a sepia effect to an element (graphics filter).