Blurred Backgrounds

blurred-backgrounds.markdown

Blurred Backgrounds

A Pen by Matthew Daniel Brown on CodePen.

License.

index.html

<div class="container">

	<div class="avatar">
		<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/apple-app-store.svg" class="background" />
		<img alt="Avatar" src="https://cdn.svgporn.com/logos/apple-app-store.svg" width="100" height="100" />
	</div>

	<div class="avatar">
		<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/airbnb.svg" class="background" />
		<img alt="Avatar" src="https://cdn.svgporn.com/logos/airbnb.svg" width="100" height="100" />
	</div>

	<div class="avatar">
		<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/figma.svg" class="background" />
		<img alt="Avatar" src="https://cdn.svgporn.com/logos/figma.svg" width="100" height="100" />
	</div>

	<div class="avatar">
		<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/atom.svg" class="background" />
		<img alt="Avatar" src="https://cdn.svgporn.com/logos/atom.svg" width="100" height="100" />
	</div>

	<div class="avatar">
		<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/gitlab.svg" class="background" />
		<img alt="Avatar" src="https://cdn.svgporn.com/logos/gitlab.svg" width="100" height="100" />
	</div>

	<div class="avatar">
		<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/google-cloud.svg" class="background" />
		<img alt="Avatar" src="https://cdn.svgporn.com/logos/google-cloud.svg" width="100" height="100" />
	</div>

</div>

style.css

.avatar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100px;
	height: 100px;

	border-radius: 10%;
	overflow: hidden;

	/* Subtle inner border */
	box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}

.avatar img {
	height: 70%;
	width: 70%;
	z-index: 2;

	/* Optionally add a drop shadow to the main image	 */
	/* to make it feel "lifted"	 */
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}

.avatar .background {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	transform: scale(2);
	filter: blur(13px) opacity(0.2);
}

/* Irrelevant styling */

html,
body {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 20px;
	place-items: center;
}