I am trying to achieve linear blur on a card

expected output

linear-blur is applied with the following CSS properties

.app-container {
  position: relative;
  background: url("https://res.cloudinary.com/dmwrugc6z/image/upload/v1639725427/wallhaven-lq1ezq_blo0mr.jpg");
  background-size: cover;
  border-radius: 24px;
  margin: auto;
  width: 328px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(20px);
  -webkit-mask-box-image: linear-gradient(to top, black, black, transparent);
}

After adding overflow:hidden; -webkit-mask-box-image property is not applying, any reason for this weird behaviour?

.app-container {
  position: relative;
  background: url("https://res.cloudinary.com/dmwrugc6z/image/upload/v1639725427/wallhaven-lq1ezq_blo0mr.jpg");
  background-size: cover;
  border-radius: 24px;
  margin: auto;
  width: 328px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow:hidden;
}

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(20px);
  -webkit-mask-box-image: linear-gradient(to top, black, black, transparent);
}

unexpected output

you can find the source code here: https://codesandbox.io/s/linear-blur-issue-vdjw7?file=/src/styles.css

CodePudding user response：

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
 background-image: -webkit-gradient(
    linear, left bottom, left top, from(rgba(50,50,50,0.8)),
    to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
  );
}

see the result here

CodePudding user response：

I think this will help you

add-a-transparent-to-black-gradient-over-a-div-image