<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>
.parent {
  display: grid;
  height: 100vh;
  place-items: center;
  position: relative;
  width: 100%;
}

.child {
  aspect-ratio: 1;
  box-shadow: -4px 7px 28px -12px rgb(4 10 41 / 0.75);
  display: grid;
  place-items: center;
  position: absolute;
  width: 200px;
}

.child:nth-child(1) {
  background: hsl(20 100% 50%);
  inset-block-start: 4rem;
  inset-inline-start: 35%;
  z-index: 1;
}

.child:nth-child(2) {
  background: hsl(40 100% 50%);
  inset-block-start: 2rem;
  inset-inline-start: 25%;
  z-index: 2;
}

@layer base {
  html {
    background-color: #262626;
    background-position: top center;
    background-repeat: no-repeat;
    background-image: radial-gradient(
        50% 50% at top center,
        rgb(0 0 0 / 0.66),
        #262626
      ),
      linear-gradient(180deg, #fff, #262626);
    background-size: 120% 2000px, 100% 2000px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.