htmlcssdropshadow

Weird drop-shadow on certain backgrounds

I applied a drop-shadow filter on my clip-path, while the shadow works well on white background, it does not work at all on a darker one (example below) - enter image description here

It just looks like some weird lines instead of a blurred shadow, The shadow is a bit darker then the background, making the shadow completly black makes it work at the start of the shadow but to the end it has these lines once again. The code:

body {
  margin: 0;
  overflow-x: hidden;
  height: 2000px;
}

body .headerText {
  position: absolute;
  top: 50vh;
  left: 40vw;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 8vh;
  z-index: 10;
  color: white;
  mix-blend-mode: exclusion;
}

body .headerWrap {
  position: fixed;
  filter: drop-shadow(-30px -30px 60px #363636) drop-shadow(-30px -30px 90px #414141);
  -webkit-filter: drop-shadow(-30px -30px 60px #363636) drop-shadow(-30px -30px 90px #414141);
}

body .headerWrap header {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #2e2e2e;
  -webkit-clip-path: polygon(0% 0%, 40% 0%, 28% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 40% 0%, 28% 100%, 0% 100%);
  -webkit-animation: rotate 1s 1;
          animation: rotate 1s 1;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: calc(var(--scroll) * -3s);
          animation-delay: calc(var(--scroll) * -3s);
}

@-webkit-keyframes rotate {
  to {
    -webkit-clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
  }
}

@keyframes rotate {
  to {
    -webkit-clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
  }
}

body .landing {
  width: 100vw;
  height: 100vh;
  background-color: white;
}

body .content {
  width: 100vw;
  height: 200vh;
  background-color: #424242;
}
<html lang="en">
<head>

</head>
<body>
    <div class="headerText"><h1>Hello bruddas</h1></div>
    <div class="headerWrap">
        <header></header>
    </div>
    <script>
        window.addEventListener('scroll', () => {
            document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
          }, false);
    </script>
    <div class="landing"></div>
    <div class="content"></div>
</body>

Solution

  • Answer

    The shadow works fine on both colors.

    1. You can barely (or not...) see it, but it's there.
    2. The lines are in fact the shadow.

    The problem here, is the low amount of colors rendered by the screen due to the low contrast between the darkest and lightest colors (for the dark one).

    Screens have a limited amount of colors. It also depends on the screen type and settings, sometimes you can easily see it (and it's ugly), sometimes you can barely notice that behavior (you just see a smooth gradient).

    Example

    Here is an example:

    example

    Notice I used the same shadow for both sides.

    You should be able to see the lines on darker tones (the top of the left side, and all the right side). Maybe you cannot see the lines at all, again, it depends on the output device and settings.