Box-shadow not replicating perfect circle

user_19064652 0
Viewed 398

I'm using the box shadow property to replicate the original circle multiple times, with different spread each shadow, see:

.a {
    width: 50px;
    height: 50px;
    background: #EEB850;
    border-radius: 50%;
    position: relative;
    top: 117;
    left: 167;
    box-shadow: 0 0 0 50px #243D83,
        0 0 0 100px #6592CF;
}

However, the shadows are not replicating the circle, but instead, they look like squares with rounded corners. Any suggestion about this? Screenshot of the result.

css
1 Answers

While there is the bug in Edge/Chrome a workaround might be to create the circles with radial-gradients on a larger before pseudo element.

Here's a simple example:

.a {
  width: 50px;
  height: 50px;
  background: #EEB850;
  border-radius: 50%;
  position: relative;
  top: 117px;
  left: 167px;
}

.a::before {
  content: '';
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400%;
  height: 400%;
  border-radius: 50%;
  background-image: radial-gradient(#EEB850 0 25px, #243D83 25px 50px, #6592CF 50px 75px, transparent 75px 100%);
  background-position: top left;
}
<div class="a"></div>

Note: because one can sometimes get ragged effects with radial gradient the snippet has put the central color as its first circle to avoid edge effects (small gaps between the element and the radial gradient).

user_108674540
Related