<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: 30%;
	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);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.