🌫️ CSS Tutorial: blur() (CSS Filter Function)

📌 Introduction

The blur() function in CSS is part of thefilter property. It applies a Gaussian blur effect to an element, softening its appearance and creating depth, focus effects, glassmorphism, and smooth UI visuals. Blur is widely used in modern web design for backgrounds, images, modals, and overlays. ✨

🎯 What Does blur() Do?

  • Softens or blurs the content of an element
  • Accepts pixel-based values (px)
  • Works on images, divs, text, videos—anything!
  • Used in glassmorphism, depth effects, and focus shifts

✨ Syntax

Syntax

selector {
  filter: blur(<length>);
}

Note

The blur radius is a length value like 4px. Higher values → stronger blur.

🧩 How blur() Works

  • 0px = no blur (default)
  • > 0px = soft or strong blur effect
  • Works with backdrop-filter for background-only blur
  • Can be combined with other filters (brightness, contrast)

🔥 Basic Examples

1. Simple Blur

Simple Blur

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

2. Heavy Blur

Strong Blur

.strong-blur {
  filter: blur(20px);
}

3. Hover Blur Effect

Hover Blur

.image:hover {
  filter: blur(8px);
  transition: 0.3s;
}

🔥 Advanced Examples

1. Glassmorphism Blur Background

Note

backdrop-filter blurs the background **behind** the element—not the element itself!

Glassmorphism

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 14px;
}

2. Blur + Brightness Together

Combined Filters

.combo {
  filter: blur(3px) brightness(1.2);
}

3. Blurred Text (Frosted Text Effect)

Blurred Text

.blur-text {
  filter: blur(2px);
}

4. Background Blur Without Affecting Children

Note

Use pseudo-element for isolated blur.

Pseudo-Element Blur

.blur-bg {
  position: relative;
}

.blur-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("image.jpg");
  filter: blur(10px);
  z-index: -1;
}

📊 blur() vs backdrop-filter: blur()

PropertyWhat It Blurs
filter: blur()The element itself and its contents
backdrop-filter: blur()Only the background behind the element

🧠 Tips for Using blur()

  • Use small blur values (2–8px) for subtle UI effects
  • Use large blur values (20–50px) for background defocus
  • Combine blur with opacity and border-radius for glass effects
  • Use will-change: filter before transitions to improve performance
>>“Blurring is one of the easiest ways to guide the user’s focus — subtle yet powerful.” ✨

🎉 Conclusion

The blur() function is a versatile tool in modern CSS design, allowing you to create soft edges, depth, frosted backgrounds, and rich UI effects. Whether you're building a glassy card, a blurred overlay, or a dreamy background, blur() helps elevate your visuals with elegance and simplicity. 🚀