How to Use Blur Filter in CSS: Syntax and Examples

Use the filter property with the blur() function in CSS to apply a blur effect to elements. For example, filter: blur(5px); blurs the element by 5 pixels.

Syntax

The blur() function is used inside the filter property to create a blur effect. The value inside blur() specifies the radius of the blur in pixels or other CSS length units.

• filter: CSS property to apply graphical effects.
• blur(radius): Function that blurs the element by the given radius.
• radius: The amount of blur, usually in px. Higher values mean more blur.

css

selector {
  filter: blur(5px);
}

Example

This example shows a simple box with text that is blurred using filter: blur(4px);. You will see the text and background become fuzzy.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eef2f3;
  font-family: Arial, sans-serif;
}

.blur-box {
  width: 300px;
  height: 150px;
  background-color: #4a90e2;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  filter: blur(4px);
  border-radius: 8px;
  text-align: center;
}

Output

A blue rectangular box with white text that appears fuzzy and blurred.

Common Pitfalls

Some common mistakes when using the blur filter include:

• Using blur() without the filter property, which will not work.
• Setting the blur radius too high, making content unreadable.
• Not considering performance, as heavy blur effects can slow down rendering on some devices.
• Forgetting that blur affects the whole element including text and background.

css

/* Wrong: blur() used alone does nothing */
.element {
  /* blur(5px); This is invalid CSS */
}

/* Right: use filter property */
.element {
  filter: blur(5px);
}

Quick Reference

Property	Description	Example
filter	Applies graphical effects to elements	filter: blur(3px);
blur(radius)	Blurs the element by the radius value	blur(5px)
radius units	Usually pixels (px), can use rem, em	blur(0.5rem)
Multiple filters	Combine with other filters using spaces	filter: blur(2px) brightness(0.8);

Key Takeaways

Use the CSS property filter with blur(radius) to apply blur effects.

The blur radius controls how blurry the element looks; higher values mean more blur.

Always include the filter property; blur() alone is invalid.

Blur affects the entire element including text and background.

Avoid excessive blur to keep content readable and maintain good performance.