<div class="circle"></div>
body {
  padding: 3em 0;
  display: flex;
  justify-content: center;
}

.circle {
  position: relative;
  background: blue;
  width: 50px;
  height: 50px;
  border-radius:50%;
  box-shadow: -110px 0 0 -20px purple,
        -60px 0 0 -10px red,
        80px 0 0 10px green,
        180px 0 0 20px orange;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.