Focussed Square with blurred background

Question

I'm working on a project in ReactJS and I need to integrate a video in the background of a div. Now I have a div on top of the background which shows the video as is, but the rest of the background needs to be blurred, kinda like this. Is there any way I can do this using CSS?

Answer 1

Yes, use the filter CSS property on an element that will absolutely fill a parent element to act as a backdrop.

html,
body {
  margin: 0;
  padding: 0;
}

.filter-demo__main {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.filter-demo__bg {
  /* You'll have to keep this and the img src in sync*/
  background-image: url("https://placeimg.com/640/480/nature");
  background-size: cover;
}

.filter-demo__bg {
  position: absolute;
  z-index: 1;
  /*
   * The negative values of top, right, bottom, left are to
   * account for the "bleeding" effect of the underlying element's
   * color showing through.  Set them to 0 to see what I mean.
   * Their values should about the negative value whatever you feed
   * the blur().
   */
  filter: blur(10px);
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

.filter-demo__actual {
  z-index: 2;
  border: 10px solid white;
  max-height: 50%;
  max-width: 50%;
}

<div class="filter-demo__main">
  <div class="filter-demo__bg"></div>
  <!-- Make sure the img src is the same as the background image for the filter-demo__bg -->
  <img class="filter-demo__actual" src="https://placeimg.com/640/480/nature" alt="A placeholder image of nature" />
</div>