gradient-borders.scss

// From: https://codepen.io/GeorgePark/pen/EEGJEj

.gradient-border {
	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);
}

.gradient-border-1 {
	border-radius: 30%;
	background-image: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=350&h=350&fit=crop&crop=faces),
		linear-gradient(to top, #0fd850, #f9f047);
}

.gradient-border-2 {
	border-radius: 50%;
	background-image: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=350&h=350&fit=crop&crop=faces),
		linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
}

.gradient-border-3 {
	border-radius: 50% 10%;
	background-image: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=350&h=350&fit=crop&crop=faces),
		linear-gradient(to bottom left, #f83600, #f9d423);
}