The blur() CSS function is part of the filter property and is used to apply a Gaussian blur to an element, effectively softening its edges and reducing detail. This creates a visually “out-of-focus” effect, similar to what you would see in photography when a lens is not focused on a subject. The intensity of the blur is controlled by a length value, typically in pixels, with larger values producing a stronger blur.

When blur() is applied, it affects the rendered content of an element, including images, text, and backgrounds. However, it does not alter the element’s layout or underlying HTML structure, so it can be safely used for decorative effects without impacting the flow of content. You can combine blur() with other filter functions such as brightness() or contrast() to achieve more complex visual effects.

For example, applying a subtle blur to a img element can create a soft background effect:

img.background {
  filter: blur(5px);
}

Additionally, blur() can be animated using transition to create smooth focus or hover effects. For instance, you could blur an image when hovering over a container to draw attention to overlay text:

.container img {
  transition: filter 0.3s ease;
}

.container:hover img {
  filter: blur(8px);
}

The blur() function is widely supported across modern browsers and is particularly useful for background effects, image overlays, and enhancing focus on specific page elements without needing additional image editing.