CSS shadow effect - css

Question

Does anyone knows how to achieve the following effect using CSS? (I'm referring to the shadows between each circle)
So far my html looks like this:
<div>
<div class="psa-circle-container"><span class="psa-circle">12</span><br>CIUDADES</div>
<div class="psa-circle-container"><span class="psa-circle">3</span><br>
EQUIPOS POR CIUDAD</div>
<div class="psa-circle-container"><span class="psa-circle">18</span><br>
JUGADORES POR EQUIPO</div>
</div>
And this is my css:
.psa-circle {
font-size: 35px;
line-height: 70px;
display: inline-block;
width: 70px;
height: 70px;
background: white;
border-radius: 50%;
margin: 30px;
box-shadow: inset 0 0 5px #000000;
color: black;
}
.psa-circle-container {
display: inline-block;
text-align: center;
color: white;
padding: 20px;
width: 180px;
vertical-align: top;
font-size: 18px;
font-weight: bold;
margin: 0 20px 20px;
padding-top: 0;
}
Acomplishing this:
I have tried to use the "psa-circle-container" with an inset shadow with no success. I've tried googling shadow effects but i haven't found something like it.

Answer 1

You can use a pseudo element, like ::before
.psa-circle {
font-size: 35px;
line-height: 70px;
display: inline-block;
width: 70px;
height: 70px;
background: white;
border-radius: 50%;
margin: 30px;
box-shadow: 0 0 5px #000000;
color: black;
}
.psa-circle-container {
float: left;
text-align: center;
color: white;
padding: 20px;
width: 120px;
vertical-align: top;
font-size: 18px;
font-weight: bold;
background: steelblue;
height: 170px;
position: relative;
overflow: hidden;
}
.psa-circle-container ~ .psa-circle-container::before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
width: 40px;
left: -45px;
background: transparent;
border-radius: 50%;
box-shadow: 10px 0px 10px rgba(0,0,0,0.4);
}
<div>
<div class="psa-circle-container"><span class="psa-circle">12</span>
<br>CIUDADES</div>
<div class="psa-circle-container"><span class="psa-circle">3</span>
<br>EQUIPOS POR CIUDAD</div>
<div class="psa-circle-container"><span class="psa-circle">18</span>
<br>JUGADORES POR EQUIPO</div>
</div>

Answer 2

You can do this with box-shadow:
.psa-circle-container + .psa-circle-container:before {
content: "";
position: absolute;
top: 25%;
right: 100%;
width: 25%;
height: 50%;
border-radius: 50%;
box-shadow: 2px 0 15px 1px rgba(0,0,0,0.7);
}
.psa-circle-container + .psa-circle-container:after {
content: "";
position: absolute;
width: calc(25% + 13px);
height: 100%;
top: 0;
left: calc(-25% - 13px);
/* Background color copied from example */
background: #59bbed;
}
This creates two pseudo elements. The first one is the actual shadow. This is done via box-shadow. To make the shadow slightly round, I added a border-radius and made the element an ellipse. All the rest of the stuff in there is positioning it between the containers.
The second element is there to keep the elliptical shadow from looking like a blurry ellipse. All it does is block out part of the shadow, by covering it with the same color as the background. This may not be an ideal solution.
The snippet below shows it all together:
body {
background: #59bbed;
}
.psa-circle {
font-size: 35px;
line-height: 70px;
display: inline-block;
width: 70px;
height: 70px;
background: white;
border-radius: 50%;
margin: 30px;
box-shadow: inset 0 0 5px #000000;
color: black;
}
.psa-circle-container {
display: inline-block;
text-align: center;
color: white;
padding: 20px;
width: 180px;
vertical-align: top;
font-size: 18px;
font-weight: bold;
margin: 0 20px 20px;
padding-top: 0;
position: relative;
}
.psa-circle-container + .psa-circle-container:before {
content: "";
position: absolute;
width: 25%;
height: 50%;
top: 25%;
right: 100%;
box-shadow: 2px 0 15px 1px rgba(0,0,0,0.7);
border-radius: 50%;
}
.psa-circle-container + .psa-circle-container:after {
content: "";
position: absolute;
width: calc(25% + 13px);
height: 100%;
top: 0;
left: calc(-25% - 13px);
background: #59bbed;
}
<div>
<div class="psa-circle-container"><span class="psa-circle">12</span><br>CIUDADES</div>
<div class="psa-circle-container"><span class="psa-circle">3</span><br>
EQUIPOS POR CIUDAD</div>
<div class="psa-circle-container"><span class="psa-circle">18</span><br>
JUGADORES POR EQUIPO</div>
</div>