How to remove shadow on edge of screen for CSS filter blue and animation

Question

This only affects Chrome! Firefox and Safari doesn't have this effect.

I have a rotating div that is half off of the screen with a filter blur applied.

As the square is rotating, every 90deg a shadow appears then disappears along the edge of the bottom of the screen. I've been trying to get rid of this shadow effect but haven't been able to figure out what's causing it.

Here is a snippet of the effect:

@keyframes rotations {
  to {
    transform: rotate(0);
  }
  from {
    transform: rotate(-360deg);
  }
}

.body {
  background: #000000;
  overflow: hidden;
}

.orb {
  position: absolute;
  bottom: -100px;
  left: 100px;
  height: 200px;
  width: 200px;
  background: #00b9cf;
  filter: blur(50px);
  animation: rotations 4s linear infinite none;
}

Things I've noticed:

It has something to do with the animation and blur effect. Removing the animation causes the shadow effect to not appear. Remove the blue also stops the effect. The effect only appears every 90deg.

Remove the animation and you won't get the effect. But set the animation to stand still will still cause the effect without rotation, such as:

@keyframes rotations {
  to {
    transform: rotate(0);
  }
}

That also means applying a rotate of 45deg will remove the effect, but I want the rotation animation without it.

What I think is happening is the blur is blending the div's blue and background's black for all the sides. But when it reaches the edge of the screen it seems to be reducing the size of the div and blurring the edge and background at 90deg, rather than keeping the size and moving it go off the screen like when it is 45deg.

user_6831341 · Answer

I can't explain why this works, but-- I separated your rotating orb into two elements: an .orb and an .orb-wrapper. I then applied the positioning and the animation to the .orb-wrapper, and applied the blur filter (and height and width to get it to fill the wrapper properly) to the .orb itself. This seems to have addressed it for me on Chrome. See below:

@keyframes rotations {
  to {
    transform: rotate(0);
  }
  from {
    transform: rotate(-360deg);
  }
}

.body {
  background: #000000;
  overflow: hidden;
}

.orb-wrapper {
  position: absolute;
  bottom: -100px;
  left: 100px;
  height: 200px;
  width: 200px;
  animation: rotations 4s linear infinite none;
}

.orb {
  background: #00b9cf;
  height: 100%;
  width: 100%;
  filter: blur(50px);
}

How to remove shadow on edge of screen for CSS filter blue and animation

1 Answers