Question 191532 in Html Question posted in
Some basic documentation can be found here.

Html – Gradient Blur on DIV doesn't work as expected

I’m trying to implement a gradient blur effect on a div element that should stretch across the element from bottom to top. However, I can’t get it to work acceptably. The effect does not behave evenly, but has a very strange color gradient. What am I doing wrong?

.gradient-blur {
  position: relative;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  opacity: 1;
  mask: linear-gradient(transparent, black 75%);
}
<div class="gradient-blur">
  <span class="showMoreButton" (click)="expandMessage()">
        Mehr anzeigen
    </span>
</div>

Heres what my problem looks like:

My desired output is more like this:

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved my problem after some experimenting.

    Heres the Code:

    let bool = false;

function showMore() {
  var textContainer = document.getElementById("textContainer");
  var blurContainer = document.getElementById("blur");
  var showMoreButton = document.getElementById("showMoreButton");
  
  if(bool == false) {
    bool = true; 
    textContainer.style.height = "auto";
    blurContainer.style.display = "none";
    showMoreButton.innerHTML = "Show less";
  } else {
    bool = false;
    textContainer.style.height = "25vh";
    blurContainer.style.display = "inline";
    showMoreButton.innerHTML = "Show more";
  }
}
    body {
  display: flex;
  justify-content: center;
  overflow: auto;
  margin: 50px 0 50px 0;
}

.container {
  position: absolute; 
  width: 25vw;
  height: 25vh;
  border: 1px solid black;
  overflow: hidden; 
}

.container p {
  padding: 10px;
  text-align: justify; 
}

.gradient-blur {
  display: flex;
  justify-content: center;
  position: absolute; 
  padding: unset;
  bottom: 0; 
  height: 50%; 
  width: 100%;
}

.gradient-blur > div,
.gradient-blur::before,
.gradient-blur::after {
  position: absolute;
  inset: 0;
}
.gradient-blur::before {
  content: "";
  z-index: 1;
  backdrop-filter: blur(0.2px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 16.5%
  );
}
.gradient-blur > div:nth-of-type(1) {
  z-index: 2;
  backdrop-filter: blur(0.4px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 16.5%,
    rgba(0, 0, 0, 1) 33%
  );
}
.gradient-blur > div:nth-of-type(2) {
  z-index: 3;
  backdrop-filter: blur(0.8px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 33%,
    rgba(0, 0, 0, 1) 49.5%
  );
}
.gradient-blur > div:nth-of-type(3) {
  z-index: 4;
  backdrop-filter: blur(1.6px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 49.5%,
    rgba(0, 0, 0, 1) 66%
  );
}
.gradient-blur::after {
  content: "";
  z-index: 8;
  backdrop-filter: blur(2.2px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 66%,
    rgba(0, 0, 0, 1) 100%
  );
}

#showMoreButton {
  position: absolute;
  bottom: 5px; 
  height: 25px;
  width: 25%;
  color: #386FE5;
  z-index: 9999;
  cursor: pointer;
}
    <div class="container" id="textContainer">
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed  diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  </p>
  <div class="gradient-blur" id="blur">
    <div></div>
    <div></div>
    <div></div>
  </div> 
</div>
<button type="button" id="showMoreButton" onclick="showMore()"> Show more </button>


  2. 0

    Use the background-image property as mask may not be supported in all the browsers.

    .gradient-blur {
position: relative;
width: 100%;
height: 100%;
backdrop-filter: blur(10px);
opacity: 1;
background-image: linear-gradient(transparent, black 75%); }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search