<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.