CSS Frosted Glass WordPress Widget

I found a nice looking CSS effect on CodePen by Kyle Wetten and wanted to duplicated this in WordPress using a widget area 🙂

Register a sidebar:

register_sidebar(array(
	'name' => 'Glass Header',
	'before_widget' => '<div class="glass-header"><div class="drop-shadow"><div class="glass"></div>',
	'after_widget' => '</div></div>',
	'before_title' => '<span>',
	'after_title' => '</span>',
	)
);

Output the sidebar somewhere in your theme:

dynamic_sidebar("Glass Header");

Put together the style for your frosted glass:

.glass-header {
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(https://jarodthornton.com/love/wp-content/uploads/sites/11/2019/09/asphalt-aspiration-clouds-215.jpg);
	background-size: cover;
	background-position: center;
}
.glass {
	height: 100%;
	width: 100%;
	background-image: url(https://jarodthornton.com/love/wp-content/uploads/sites/11/2019/09/asphalt-aspiration-clouds-215.jpg);
	background-size: cover;
	background-position: center;
	clip-path: inset(1em);
	filter: blur(20px);
	display: flex;
	justify-content: center;
	align-items: center;
}
.drop-shadow {
	height: 200px;
	width: 100%;
	filter:  drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.30));
	display: flex;
	justify-content: center;
	align-items: center;
}
.drop-shadow:before {
    content: "";
    border-top: 2px solid rgba(225,225,225, 0.2);
    border-left: 1px solid rgba(225,225,225, 0.1);
    border-right: 1px solid rgba(225,225,225, 0.3);
    z-index: 2;
    filter: blur(1px);
}
.glass-header span {
	position: absolute;
	top: 70px;
	z-index: 5;
	color: white;
	font-size: 4em;
	letter-spacing: 0.75em;
	padding-left: 0.375em;
}
.glass-header .textwidget {
    position: absolute;
    margin: 70px 0 0 0;
}
@media (max-width: 980px) {
	.glass {
	}
	.drop-shadow:before {
		top: 5em;
	}
	.glass-header span {
		font-size: 4em;
		top: 50px;
	}
	.glass-header .textwidget {
		text-align: center;
		margin: 50px 0 0 0;
	}
	.glass-header .textwidget p {
		margin: 0px 20px;
	}
}
@media (max-width: 640px) {
	.drop-shadow span {
		font-size: 2em;
	}
}

Here’s the CodePen https://codepen.io/kylewetton/pen/bGbaazX

Here’s my working example using the code and markup shared here https://jarodthornton.com/love/about/