Create an orange ball with semi-transparent black overlay.

by Michael Prosser

HTML

<div class="ball"></div>

CSS

.ball {
  background-color: orange;
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: auto;
}
.ball:after{
  position: absolute;
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color:rgba(0,0,0,0.2);
  transform: translateX(50%) translateY(50%) scaleY(0.5);
  left: 0%;
  top: 0%;
  z-index: -1;
}