SnippetsWordpress

CSS Frosted Glass WordPress Widget

By January 5, 2020April 11th, 2020No Comments

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' =&gt; '<div class="glass-header"&gt;<div class="drop-shadow"&gt;<div class="glass"&gt;</div&gt;',
	'after_widget' =&gt; '</div&gt;</div&gt;',
	'before_title' =&gt; '<span&gt;',
	'after_title' =&gt; '</span&gt;',
	)
);

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/

Contact us to learn about adopting the web for your business

Jarod Thornton

Author Jarod Thornton

More posts by Jarod Thornton