<div class="element element-1">Drop Shadow</div>
<div class="element element-2">Inset Shadow</div>
body {
  align-items: center;
  background-color: #afd275;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.element {
  align-items: center;
  background-color: #afd275;
  border-radius: 50px;
  display: flex;
  height: 200px;
  justify-content: center;
  margin-right: 4rem;
  width: 200px;
}

.element-1 {
  box-shadow: 
    12px 12px 16px 0 rgba(0, 0, 0, 0.25),
    -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}

.element-2 {
  box-shadow: 
    12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset,
    -8px -8px 12px 0 rgba(0, 0, 0, .25) inset;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.