<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="headshot headshot-1"></div> <div class="headshot headshot-2"></div> <div class="headshot headshot-3"></div>

body { display: flex; justify-content: space-around; align-content: center; align-items: center; flex-wrap: wrap; min-height: 100vh; background-image: linear-gradient(#111, #050505); --img-url: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=350&h=350&fit=crop&crop=faces); } .headshot { flex-shrink: 0; margin: 20px; height: calc(150px + 6vw); width: calc(150px + 6vw); border: calc(8px + 0.2vw) solid transparent; background-origin: border-box; background-clip: content-box, border-box; background-size: cover; box-sizing: border-box; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5); } .headshot-1 { border-radius: 10%; background-image: var(--img-url), linear-gradient(#f9f047, #0fd850); } .headshot-2 { border-radius: 50%; background-image: var(--img-url), linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5); } .headshot-3 { border-radius: 50% 10%; background-image: var(--img-url), linear-gradient(to bottom left, #f83600, #f9d423); }