<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

/*
  quick reminder of the anatomy of a box-shadow!
  box-shadow: <x-offset> <y-offset> <blur> <spread> <color>;
*/

:root {
  --single-shadow:
    0 0 0 40px #355c7d;
  --multi-shadow:
    0 0 0 60px #f67280,
    0 0 0 80px #6c5b7b;
  --gradient-colors: #f1bbba, #ece5ce, #c5e0dc;
}

.a {
  box-shadow:
    0 0 0 20px #60b99a,
    var(--single-shadow);
}

.b {
  box-shadow:
    var(--multi-shadow);
}

.c {
  box-shadow:
    0 0 0 20px #60b99a,
    var(--single-shadow),
    var(--multi-shadow);
}

body, html {
  height: 100%;
}

body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  background-image: linear-gradient(45deg, var(--gradient-colors));
  font: bold 2.5rem/1 sans-serif;
}

div {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #6c5b7b;
  background-color: #fff;
}