# Controlling the amount of blur in container background image

**URL:** <https://community.glideapps.com/t/controlling-the-amount-of-blur-in-container-background-image/81284>\
**Category:** Feature Requests\
**Created:** [April 11, 2025, 9:28am UTC](https://community.glideapps.com/t/controlling-the-amount-of-blur-in-container-background-image/81284 "2025-04-11T09:28:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Korbib](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/korbib/32/71813_2.png) [@Korbib](https://community.glideapps.com/u/Korbib)\
**Post date:** [April 11, 2025, 9:28am UTC](https://community.glideapps.com/t/controlling-the-amount-of-blur-in-container-background-image/81284/1 "2025-04-11T09:28:20Z")

</div>

Hi,

Is it possible to add a feature to control the amount of blur like this ?

Actually the blur is hard and we cannot see what the image is 😞

With soft blur we can see the image and read the text 🥳

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/6/76218cff0ac769337b17624aa05108e90319790d.jpeg)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [April 11, 2025, 12:04pm UTC](https://community.glideapps.com/t/controlling-the-amount-of-blur-in-container-background-image/81284/2 "2025-04-11T12:04:09Z")

</div>

You can use some javascript to create a blurred version of an image.

```auto
async function convertToBlurred(imageUrl) {
  return new Promise(function(resolve, reject) {
    try {
      var img = new Image();
      img.crossOrigin = "Anonymous"; // To avoid CORS issues if loading from a different domain

      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        // Apply blur effect by setting the filter and redrawing the image
        ctx.filter = 'blur(15px)'; // Adjust blur value as needed
        ctx.drawImage(canvas, 0, 0);

        // Convert canvas to base64 Data URI
        var blurredDataUri = canvas.toDataURL();

        // Resolve the promise with the blurred Data URI
        resolve(blurredDataUri);
      };

      img.onerror = function() {
        reject(new Error('Failed to load image'));
      };

      img.src = imageUrl;
    } catch (error) {
      reject(error);
    }
  });
}

  return await convertToBlurred(p1);

```

---

<div class="post-metadata">

**Author:** ![Korbib](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/korbib/32/71813_2.png) [@Korbib](https://community.glideapps.com/u/Korbib)\
**Post date:** [April 11, 2025, 12:52pm UTC](https://community.glideapps.com/t/controlling-the-amount-of-blur-in-container-background-image/81284/3 "2025-04-11T12:52:00Z")

</div>

Yes I know but I think it will be usefull to have a quick access to this feature because it’s more user friendly 😉  
If we’re not happy with the result or want more control then we can dig into code if we know how to.