Hello emoiishaaq,
You may want to check if this code does what you want…
HTML
<body>
<div id="parent">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
CSS
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em sans-serif;
}
#parent {
width: 3.19em;
padding: 1em 2em;
margin: 1em auto;
border: 1px solid #000;
border-radius: 0.5em;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
#parent > div {
width: 3.125em;
height: 3.125em;
border: 1px solid #00f;
border-radius: 50%;
background-image: linear-gradient(#e66465, #9198e5);
background-size: 3.25em 18.75em;
}
#parent > div:nth-of-type(1) {
margin-bottom: 0.625em;
}
#parent > div:nth-of-type(2) {
margin-bottom: 1.25em;
background-position: 0 -3.75em
}
#parent > div:nth-of-type(3) {
margin-bottom: 1.875em;
background-position: 0 -8.1255em
}
#parent > div:nth-of-type(4) {
margin-bottom: 1.25em;
background-position: 0 -13.125em
}