Blur Image CSS: Two Ways to Blur Images for Gorgeous Effects

In CSS, you can apply a blur effect to the background image of an element. This is a technique typically used to blur the background image of a webpage. This enhances the design and provides a visual hierarchy, drawing user attention to elements in the foreground.

The blur effect in CSS is not a standalone property but a value that can be used with properties like filter and backdrop-filter. The filter property lets you apply graphical effects like blurring to an element. The backdrop-filter property applies the effect to the area behind the element, effectively blurring the background.

We’ll show two ways to blur a background image, one using filter and one using backdrop-filter.

This is part of a series of articles about CSS Image

In this article:

• Method 1: Blurring an Image in CSS with the filter Property
• Method 2: Blurring an Image in CSS Using the Backdrop-Filter Property
• Blur Images with CSS at Scale

Method 1: Blurring an Image in CSS with the filter Property

The blur value of the filter property adds a Gaussian blur to the designated image. The blur() function takes one parameter, the radius value. This defines the intensity of the blur effect, measured in terms of the number of pixels merging on the screen. As the radius value increases, the blur becomes more pronounced. The default value is 0 if no parameters are specified. You can only provide numerical values, not percentages.

Let’s see an example.

HTML Code

We’ll define a <div> element with some text:

<div class="image"></div>
<div class="text">
  <h1>CSS Background Blur Example</h1>
  <p>We'll blur the image in the background using the CSS filter property.</p>
</div>

CSS Code

Next, we’ll add a background image and generate a blur effect using this CSS code:

.image {
  background-image: url('https://picsum.photos/id/16/1200/300');
  height: 500px;
  background-size: cover;
  filter: blur(5px);
}

.text {
  color: white;
  font-size: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

In this example, we use background-size: cover to ensure the image covers the entire area of the <div>, maintaining its aspect ratio. The property filter: blur(5px)applies a Gaussian blur effect to the image, using a radius of 5 pixels.

To play with the code yourself, check out the CodePen.

Method 2: Blurring an Image in CSS Using the Backdrop-Filter Property

The example code below illustrates different backdrop filters. It defines several frames with text against the backdrop of an image. Each frame uses a different backdrop effect.

HTML Code

<div class="container">
  <div class="frame example1">
    <h4 class="text">blur(6px);</h4>
  </div>
  <div class="frame example2">
    <h4 class="text">grayscale(70%);</h4>
  </div>
  <div class="frame example3">
    <h4 class="text">saturate(6);</h4>
  </div>
  <div class="frame example4">
    <h4 class="text">sepia(60%);</h4>
  </div>
</div>

CSS Code

.container{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: url('https://picsum.photos/id/16/1200/700') no-repeat center center;
  background-size: cover;
}
.frame{
  width: 140px;
  height: 200px;
  border: 2px solid white;
  padding: 10px;
}

.example1{
  backdrop-filter: blur(6px);
}
.example2{
  backdrop-filter: grayscale(70%);
}
.example3{
  backdrop-filter: saturate(6);
}
.example4{
  backdrop-filter: sepia(60%);
}

.text {
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black */
  color: white;
  font-weight: bold;
  position: relative;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  padding: 8px;
}

This provides a nice demo of the things you can do with the backdrop-filter effect: Besides blurring the image, you can also modify it to grayscale, apply a saturate effect, and apply a sepia effect, among others.

To play with the code yourself, check out the CodePen.

Related content: Read our guide to CSS image effect

Blur Images with CSS At Scale

Cloudinary simplifies the process of applying various transformations to your images, including blurring. By using Cloudinary, you can offload the heavy lifting of image processing to the cloud, ensuring faster load times and improved user performance. Additionally, Cloudinary’s ability to handle transformations on-the-fly means you can apply these effects dynamically without the need to maintain multiple versions of your images.

Adding a blur effect to images using Cloudinary is straightforward:

1. Sign Up and Upload Your Image – First, sign up for a Cloudinary account if you haven’t already. Once you’re in, upload the image you want to apply the blur effect to.

2. Apply the Blur Transformation – Cloudinary uses URL-based transformations, making it easy to apply effects. To add a blur effect, you can modify the image URL by adding the e_blur parameter. For example:

<img src="https://res.cloudinary.com/demo/image/upload/e_blur:200/sample.jpg" alt="Blurred Image">

In this URL, e_blur:200 applies a blur effect with a strength of 200. You can adjust the strength according to your preference.

3. Responsive Blurring – Cloudinary also supports responsive design. You can combine the blur effect with responsive transformations to ensure your images look great on all devices. For example:

<img src="https://res.cloudinary.com/demo/image/upload/c_scale,w_300/e_blur:50/sample.jpg" alt="Responsive Blurred Image">

Here, the image is scaled to 300 pixels wide and then blurred with a strength of 50.

Scaling Blurred Images with Cloudinary

One of the standout features of Cloudinary is its ability to handle media transformations at scale. This is crucial for websites with large amounts of visual content or those experiencing high traffic. Here’s how Cloudinary ensures efficiency and performance:

• On-the-Fly Transformations – With Cloudinary, you don’t need to store multiple versions of your images. Transformations are applied on-the-fly, which means the original image is stored once, and variations are generated as needed. This reduces storage requirements and simplifies media management.
• Content Delivery Network (CDN) – Cloudinary utilizes a global CDN to deliver your transformed images quickly to users, regardless of their location. This ensures minimal latency and fast load times, which are critical for user experience and SEO.
• Automation and Optimization – Cloudinary offers automatic optimization features that adjust image quality and size based on the user’s device and connection speed. This ensures that users always get the best possible experience without compromising performance.

Summing It Up

Blurring images with CSS is a powerful technique to enhance your website’s visual appeal, and using Cloudinary makes it easy to implement and scale. While using basic CSS with the blur() function is the gold standard for simpler websites, it does have its limitations.

By leveraging Cloudinary’s robust transformation capabilities and CDN delivery, you can ensure your images are optimized and delivered efficiently to users worldwide. Unlock the full potential of your digital content with Cloudinary’s advanced editing and optimization tools. Sign up for free today!