Create a glossy light effect using CSS

Question

I'm trying to create a light effect with CSS and HTML only. Just like this image

I don't know if it's possible. or how to do it.

Any help will be appreciated.

.circle {
  border: 10px solid;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: green;
}

<div class="circle"></div>

Answer 1

Here is my example

*,
*:before,
*:after {
  box-sizing: border-box;
}
div {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background: linear-gradient(to bottom, #393939 0%, #151515 100%);
  position: relative;
}
div:before {
  content: '';
  width: 106px;
  height: 106px;
  border-radius: 53px;
  background: #19f000;
  border: 1px solid black;
  position: absolute;
  left: 7px;
  top: 7px;
}
div:after {
  content: '';
  width: 80px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  transform: rotate(-18deg);
  left: 13px;
  top: 9px;
}

<div></div>

JSfiddle Demo