Question: I have a background image and a box with a title in it. How would I blur part of the image in the box? I tried using web kit filter but it blurred the title

[![Example](https://i.stack.imgur.com/yWjPZ.png)](https://i.stack.imgur.com/yWjPZ.png)

```
.title {
  height: 90px;
  margin: auto;
  margin-top: 90px;
  margin-left: 250px;
  margin-right: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 1px;
  border-style: solid;
 filter: blur(8px);
  -webkit-filter: blur(8px);

}

```

```
.bgimage {
  width: 100%;
  height: 540px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("img");
}

```

```
   <div className="bgimage">
    <div className="title">Title</div>
  </div>

```

Answer: 
You may need **[backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)**

> 
> The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
> 
> 
> 

```css
backdrop-filter: blur(20px);

```

An amazing online demo: <https://codepen.io/alphardex/pen/pooQMVp>

```css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* background: URL(); */
  background-size: cover;
  background-position: center;
}

.bgimage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72vw;
  height: 36vh;
  /* box-shadow: ; */
  backdrop-filter: blur(20px);
  transition: 0.5s ease;

  &:hover {
    /* box-shadow: ; */
  }

  .title {
    padding-left: 0.375em;
    font-size: 3.6em;
    font-family: Lato, sans-serif;
    font-weight: 200;
    letter-spacing: 0.75em;
    color: white;

    @media (max-width: 640px) {
      font-size: 2em;
    }
  }
}

```

[![enter image description here](https://i.stack.imgur.com/rdx6i.jpg)](https://i.stack.imgur.com/rdx6i.jpg)
Add another blurred image with a pseudo-element and clip it:

```css
.example {
  position: relative;
  width: 400px;
  height: 400px;
  background: #000 url(https://picsum.photos/id/870/400/400) no-repeat center center scroll;
    display: flex;
  justify-content: center;
  align-items: center;
}

.example::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000 url(https://picsum.photos/id/870/400/400) no-repeat center center scroll;
  clip-path: inset(80px);
  filter: blur(10px);
}

.example p {
  font-size: 4rem;
  position: relative;
  z-index: 1;
}
```

```html
<div class="example">
  <p>Title</p>
</div>
```