White outline in box-shadow

[Chronzam]

I think this only occurred in firefox, when I rotate the box, the box-shadow shows an outline. Is there a way to remove this?

Here is the pen: https://codepen.io/Supersudo/pen/qBOrMPp

[Erik_J]

@Chronzam

Is there a way to remove this?

I tested in Chromium and Firefox on a Linux box.

There is a thin light edge like if the smoothing is misaligned in Firefox but not in Chromium. Different angles affects the lightness of the edge.

It becomes more visible when I zoom back and forth, still not visible in Chromium.

In rectilinear angles the smoothing of the edges doesn’t occur.

I think the issue is due to the rendering so you just have to accept it happens.

[PaulOB]

@Chronzam

Is there a way to remove this?

You are always going to get anti aliased pixels when you rotate something especially on every other pixel.

If you are fixing the design at the -45deg rotation then a 1px translation should hide the white border on the shadow.

e.g.

.container .box {
  background-color: #3d3d3d;
  height: 20rem;
  width: 20rem;
  box-shadow: -2rem 2rem 1rem;
   transform: translateZ(1px) rotateZ(-45deg);
}

Also sometimes adding a border in the same background color can help.

border: 1px solid #3d3d3d;