# How to add blurred background to your image with CSS?

I am building notenote.cc, it's a Instagram style note taking app. I want to show photos that users pick from their device in a square frame. Something like this:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725001142014/78e8f6b8-7833-426c-9abc-f9ca9f01fa48.png align="center")

After some perplexity and Google, I have a solution.

### First try: use css.glass directly

I found [this website](https://css.glass/), it has very good blurred glass effect:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725001418857/6546adc2-bc27-41fb-83ca-988395ae582d.png align="center")

I dragged the sliders, and got this css:

```css
.image-container {
  width: 600px;
  height: 600px;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(139, 137, 137, 0.52);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
```

Use it for an image and its wrapper:

```xml
<div class="image-container">
  <img src="image.webp" alt="Your image" />
</div>
```

But the background is just plain grey, no blur at all, the effect is not good:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725002079506/8cde8322-ca2a-44fc-8129-7c7e29327f09.png align="center")

### Second try: add a background image behind the blur CSS

The blur effect looks nice at the css.glass website, because there is something (orange color and text) behind. So let's show the image behind the blur.

Now the html looks like this:

```xml
<div class="image-container">
  <div class="image-blur">
    <img src="image.webp" alt="Your image" />
  </div>
</div>
```

image-container will have the image as background, image-blur will have the blur effect, and img show the full image.

CSS:

```css
.image-container {
  width: 600px;
  height: 600px;

  background-image: url('image.webp');
  background-size: cover;
}

.image-container .image-blur {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(139, 137, 137, 0.52);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
```

`background-size: cover` makes sure that the image covers the whole container, which means only part of the image is the background, but it's fine.

Now the effect is very nice:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725002642775/334d5eaf-7fd6-487f-a401-ceb09e421f7b.png align="center")

Thanks for reading and give [notenote.cc](https://notenote.cc?ref=blog-imgbg) a try.