Search code examples
htmlcss

How to change color of box-shadow into "blur" of Inverted corners in CSS

I made L shaped menu bar with inverted corners inside by this method:Inverted corners, but the problem is I cannot change the corner color to blur because its color is from box-shadow.

My question is how can I change it to color: none; blur: 20px, like rec3 and rec4? Or is there any other way to make L shaped menu bar?

Problem:

This is my code

body {
  background-image: url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-repeat: no-repeat;
  background-size: cover;
}

.rec3 {
  /*Horizontal bar*/
  position: fixed;
  width: 60vw;
  height: 80px;
  backdrop-filter: blur(20px);
  bottom: 20px;
  left: 20px;
  border-radius: 0 25px 25px 80px;
}

.rec4 {
  /*Vertical bar*/
  position: fixed;
  width: 80px;
  height: 60vh;
  bottom: 90px;
  left: 20px;
  backdrop-filter: blur(20px);
  border-radius: 25px 25px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: hidden;
  z-index: -1;
}

#top {
  position: absolute;
  height: 30px;
  width: 30px;
  left: 80px;
  overflow: hidden;
}

#top {
  top: -30px;
}

#top::before {
  content: '';
  position: absolute;
  right: 0;
  height: 200%;
  width: 200%;
  border-radius: 100%;
  box-shadow: 10px 10px 5px 100px blue;
  /*How can i change this color like rec3 and rec 4 bar*/
  z-index: -1;
}

#top::before {
  top: -100%;
  right: -100%;
}
<div class="rec3">
  <div id="top"></div>
</div>
<div class="rec4">
</div>

I tried to make an SVG with AI but I don't know how to do it. AdobeIllus

Solution

  • I see you don't care about the "intersections" in blurred blocks, so then you can apply mask + border-radius to the #top element:

    body {
  background-image: url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-repeat: no-repeat;
  background-size: cover;
}

.rec3 {
  /*Horizontal bar*/
  position: fixed;
  width: 60vw;
  height: 80px;
  backdrop-filter: blur(20px);
  bottom: 20px;
  left: 20px;
  border-radius: 0 25px 25px 80px;
}

.rec4 {
  /*Vertical bar*/
  position: fixed;
  width: 80px;
  height: 60vh;
  bottom: 90px;
  left: 20px;
  backdrop-filter: blur(20px);
  border-radius: 25px 25px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: hidden;
  z-index: -1;
}

#top {
  position: fixed;
  height: 60px;
  width: 60px;
  left: 100px;
  overflow: hidden;
  bottom: 100px;
  backdrop-filter: blur(20px);
  mask: radial-gradient(30px, #0000 99%, #000);
  border-radius: 50% 50% 50% 0;
}
    <div class="rec3"></div>
<div class="rec4"></div>
<div id="top"></div>