blur() CSS Function

Description

The CSS blur() function applies a Gaussian blur to the input image. It takes a single parameter, radius, which specifies the strength of the blur in pixels. A larger radius will result in a more blurred image.

The blur() function can be used to create a variety of effects, such as:

• Blurring the background of an element to make it stand out in the foreground.
• Blurring the edges of an image to create a soft focus effect.
• Blurring text to make it more difficult to read, but still visible.

Here is an example of how to use the blur() function to blur the background of an image:

.my-image {
  background-image: url(image.jpg);
  filter: blur(5px);
}

This will blur the background image by 5 pixels, making the foreground elements stand out more.

The blur() function can also be used in conjunction with other CSS filters to create more complex effects. For example, you could use the brightness() filter to brighten a blurred image, or the contrast() filter to increase the contrast of a blurred image.

Here is an example of how to use the blur() function in conjunction with the brightness() filter to create a soft focus effect:

.my-image {
  background-image: url(image.jpg);
  filter: blur(5px) brightness(1.2);
}

This will blur the background image by 5 pixels and then brighten it by 20%. This will create a soft focus effect that is similar to what you would get from using a camera lens with a wide aperture.

The blur() function is a powerful tool that can be used to create a variety of effects on images and text. It is a good idea to experiment with the blur() function to see what kind of effects you can create.

Syntax

blur() = blur( <length>? )

Values

• lengthIt defines the value of the standard deviation to the Gaussian function, i.e., how many pixels on the screen blend into each other; thus, a larger value will create more blur. A value of 0 leaves the image unchanged.

Example

<img class="blur-me" src="images/nature.jpg" alt="Blur Example">

.blur-me {

   filter: blur(5px);

}

Browser Support

The following table will show you the current browser support for the CSS blur() function.

Desktop
12	53	35	40	9.1

Tablets / Mobile
53	35	41	9.3	6	4.4

Last updated by CSSPortal on: 7th October 2023