How To Make Frosted Glass Effects With Pure CSS | Frosted Glass | CSS Effects | Web Cifar 2020

Our Blogs
In this tutorial I’m going to show you how to create a frosted glass effect in CSS. Nowadays you can see that smooth effects in pretty much everywhere. We can emulate frosted glass in websites using CSS, and in this tutorial I’ll show you how you can make it with css.

See the Pen Frosted Effect With CSS by Web Cifar (@Web_Cifar) on CodePen.

CSS CODE:


* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.container {
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: url('https://images.unsplash.com/photo-1498036882173-b41c28a8ba34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60') no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
.frosted {
	height: 400px;
	width: 400px;
	background: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.frosted::after {
	z-index: -1;
	content: '';
	position: absolute;
	top: -10px;
	bottom: -10px;
	right: -10px;
	left: -10px;
	background: inherit;
	box-shadow: inset 0 0 2000px rgba(47, 116, 206, 0.5);
	filter: blur(10px);
}

Sharing is caring!

Liked This Article?

Subscribe To Our Newsletter. So You will never Miss Another Update.

Leave a Comment

Your email address will not be published. Required fields are marked *

shares