Add blurred edges to a div but keep the content inside transparent-CodePudding

I have a slider, I want the edges of the content div to have a blur effect, blurring the background image behind it. The background image is from the parent div. As you can see the content inside it is not blurred and you can see through the background, but the edges are blurred. Any ideas on how to achieve this effect?

It doesn't matter if it's CSS only or mixed with JavaScript, I'm using React anyways.

CodePudding user response：

Here's an approach using clip-path (documentation) and backdrop-filter (documentation) Both are relatively new rules, so check your browser compatibility.

We use the clip path to select a 10% "frame" around the inside of your box, and then apply a 10px blur with backdrop-filter

body {
  min-height: 100%;
  background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 30px 100px;
}

.frame {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 10%, 90% 10%, 90% 90%, 10% 90%, 10% 100%, 100% 100%, 100% 0%);
  backdrop-filter: blur(10px);
}

.content {
  position: absolute;
  border: 1px #fff solid;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
}

<div >
  <div ></div>
  <div > Your text here</div>
</div>

Here's a version using CSS variables so you can quickly/easily adjust the blurred border thickness. Just change the --b CSS variable:

body {
  min-height: 100%;
  background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}

.box {
  /* The border thickness (Can be a percentage or pixel value) */
  --b: 6px;
  /* Work out the inverse value for the right/bottom sides of the clip path */
  --b2: calc(100% - var(--b));
  
  position: relative;
  width: 300px;
  height: 300px;
  margin: 30px 100px;
}

.frame {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 0% 100%, var(--b) 100%, var(--b) var(--b), var(--b2) var(--b), var(--b2) var(--b2), var(--b) var(--b2), var(--b) 100%, 100% 100%, 100% 0%);
  backdrop-filter: blur(10px);
}

.content {
  position: absolute;
  border: 1px #fff solid;
  top: var(--b);
  left: var(--b);
  right: var(--b);
  bottom: var(--b);
}

<div >
  <div ></div>
  <div > Your text here</div>
</div>

CodePudding user response：

You don't need to use clip-path if you set the same background image on the content box. Caveat: background-attachment needs to be fixed. And if you use flex for all the boxes, just setting position: absolute on the content would be enough to center it on top.

html, body, .bg {
  height: 100%;
  width: 100%;
}

.bg, .blur-box, .content-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg, .content-box {
  background: url(https://picsum.photos/seed/1/1920/1080/) no-repeat fixed 0 0 / cover;
}

.blur-box {
  position: relative;
  width: 70vh;
  height: 70vh;
  backdrop-filter: blur(5px);
}
 
.content-box {
  position: absolute;
  width: 50vh;
  height: 50vh;
  color: white;
  border: 1px solid white;
}

<div >
  <div >
  </div>
  <div >
      TEXT
  </div>
</div>