Blur Filter

The blur() filter does exactly what it sounds like — it blurs an element. You can think of it like frosted glass. The higher the blur radius, the more blurred the element becomes. It is great for creating depth effects, background blur, or artistic visuals.

Basic Usage

Apply the blur filter using the filter property. The value is a length (usually pixels) that determines how much blur to apply.

.blurred {
  filter: blur(5px);
}
    

A value of 0 means no blur. As you increase the value, the element becomes increasingly fuzzy. Values around 3-10px are common for subtle effects, while 20px and above create heavy blurs.

Hover Blur Effect

A popular pattern is to blur an image and then remove the blur on hover. This creates a nice focus effect that draws attention to the element.

.card-image {
  filter: blur(3px);
  transition: filter 0.3s ease;
}

.card:hover .card-image {
  filter: blur(0);
}
    

The transition makes the blur change smooth instead of instant. This is a clean way to create interactive visual effects with minimal code.

Background Blur Trick

You can create a frosted glass effect by blurring a background element. This is common in modern UI design for navigation bars and modals.

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('image.jpg');
  filter: blur(10px);
  z-index: -1;
}

.overlay {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}
    

The backdrop-filter property blurs what is behind an element, while filter: blur() blurs the element itself. Both are useful in different situations.