<div class="wrapper">
  <div class="container outer-shadow mb-4">
    Outer Shadow
  </div>
  <div class="container inner-shadow mb-4">
    Inner Shadow
  </div>
  <div class="container inner-shadow">
    <div class="container outer-shadow">
      Outer Shadow in Inner Shadow
    </div>
  </div>
</div>
body {
  color: #fff;
  background: #191312;
}

.wrapper {
  padding: 1rem;
}

.container {
  padding: 1.5rem;
  border-radius: 8px;
}

.outer-shadow {
  box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.05), 5px 5px 5px #0C0200;
}

.inner-shadow {
  box-shadow: inset 5px 5px 5px #0C0200, inset -5px -5px 5px rgba(255, 255, 255, 0.05);
}

.mb-4 {
  margin-bottom: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.