Front-End Development Building an Image Upload Feature with JavaScript Mastering Image Alignment: Centering Images with HTML & CSS Adding Video to Your React Native App with react-native-video HTML Image Slider: Do It Yourself and 1-Step Image Gallery Widget How to Effectively Manage Digital Assets in a PHP Image Gallery Introducing Angular Image Editor: Your New Editing Too Mastering Javascript Image Annotation Mastering JavaScript Image Popup Python Video Player: 3 Free Options and a Quick Tutorial Image Recognition Machine Learning: Use Cases and Common Algorithms HTML/CSS: How to Center Images Vertically and Horizontally How to Create an Image Map Understand CSS Background Position with 4 Simple Examples Java for Image Processing: 4 Libraries You Should Know Python Video Processing: 6 Useful Libraries and a Quick Tutorial Blur Image CSS: Two Ways to Blur Images for Gorgeous Effects Designing a Video Flipping App for Android Build an App for Embedding Video Watermarks on Android Devices Change Image on Hover with HTML and CSS How to Align Images with CSS Full Page Background Image with CSS: Tutorial and 5 Automation Tips Using CSS to Scale Page Elements and a Better Way to Scale Your Images CSS Background Image: Quick Tutorial and 3 Automation Tips Featured Image: Best Practices to Feature Images on Your Website Image Gallery Websites: Tips and Tricks for a Stunning Image Gallery 6 Ways to Stretch a Background Image with CSS Auto Cropping for Images and Video: Features & Best Practices FLAC vs. WAV: 4 Key Differences and How to Choose Converting Audio to Video: A Practical Guide FLAC vs. AIFF: 5 Key Differences and How to Choose FLAC vs. MQA: 5 Key Differences and How to Choose Converting WAV Files To OGG The Ultimate Guide On Converting OGG Files To WAV Sound Choices: FLAC vs. MP3 AAC vs MP3 – The Future of Audio Files All about AIFF and how it compares to WAV and MP3 Integrating Cloudinary with Netlify Integrating Cloudinary with Svelte and SvelteKit Integrating Cloudinary with Nuxt Integrating Cloudinary with Gatsby File Upload as a Service: How It Works and 5 Leading Solutions Native Mobile App Development Creative Uses for CSS Inner Border and 3 Ways to Set a Border Integrating Cloudinary with Next.js Front-End Development: The Complete Guide

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

blur image css

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:

blur image css

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;
}

blur image css

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.

blur image css

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!

QUICK TIPS
Colby Fayock
Cloudinary Logo Colby Fayock

In my experience, here are tips that can help you better implement and optimize CSS blur effects:

  1. Control the performance impact of blur effects
    Applying a blur effect can be performance-intensive, especially on large images or when used excessively. To mitigate this, apply the blur selectively, such as to lower-resolution background images, or use the blur effect only during specific interactions (e.g., hover or focus states) to minimize rendering overhead.
  2. Combine blur with CSS transitions for smooth effects
    Create more dynamic and visually appealing effects by combining the blur property with CSS transitions. For example, gradually increase or decrease the blur radius on hover or click events to create smooth, engaging interactions.
  3. Use backdrop-filter sparingly for better compatibility
    The backdrop-filter property is not supported in all browsers, particularly older versions. To ensure broader compatibility, use backdrop-filter sparingly, and provide fallbacks for unsupported browsers. For example, you can set a solid color background or use a low-opacity background image as a fallback.
  4. Layer multiple filters for unique effects
    Combine multiple CSS filters, such as blur, brightness, contrast, and saturate, to create unique visual effects. For example, you can apply a subtle blur along with a slight desaturation to give a muted, dreamy look to background images.
  5. Optimize images for better blur quality
    Ensure your images are optimized before applying a blur effect. High-resolution images can look cleaner when blurred, while lower-resolution images might produce pixelated or uneven blur effects. Use optimized, high-quality images to maintain the integrity of your design.
  6. Use pseudo-elements for advanced blur effects
    For more control over the blur effect, consider applying the blur to a pseudo-element (::before or ::after) rather than directly to the image or element. This allows you to overlay content or apply additional effects, like opacity or color overlays, creating more complex and layered visual designs.
  7. Experiment with different blur strengths for responsiveness
    Use media queries to adjust the blur strength based on screen size. For example, a stronger blur might look better on larger screens, while a lighter blur can be used on smaller screens to avoid overwhelming the content.
  8. Use hardware acceleration for smoother rendering
    Force hardware acceleration for smoother blur effects by applying will-change: transform; to the blurred element. This can improve performance and rendering speed, particularly on complex pages or animations.
  9. Consider accessibility when using blur effects
    Be mindful of accessibility when applying blur effects. Ensure that important content remains readable and that the blur effect does not interfere with the usability of the page. Always test with screen readers and other assistive technologies.
  10. Optimize large-scale blurring with Cloudinary
    When working with large-scale blurring across multiple images or pages, leverage Cloudinary’s transformation capabilities. Use Cloudinary to blur images on-the-fly, ensuring optimized delivery through a global CDN, and reduce the load on your servers and improve user experience.
Last updated: Aug 24, 2024