<div class="container">
	<div class="frosted"></div>
	<h1>Frosted Glass Effect</h1>
	<div class="blink">✨</div>
</div>
body {
	background: url(https://images.unsplash.com/photo-1520440712-31802af3c144?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1173&q=80)
		no-repeat center;
	background-size: cover;
	display: grid;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.container {
	width: 30rem;
	height: 20rem;
	display: flex;
	justify-content: center;
	align-items: center;

	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.31);
	backdrop-filter: blur(5px) saturate(100%);
}
.container:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 8px;
	padding: 1px;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.25)
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
}

.frosted {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	opacity: 0.5;
	pointer-events: none;
	border-radius: 8px;
	z-index: -1;
	background: linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.75),
			rgba(0, 0, 0, 0.5)
		),
		url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

h1 {
	font-family: sans-serif;
	color: #fff;
}

.blink {
	position: absolute;
	font-size: 40px;
	top: -20px;
	left: -20px;
	padding: 2px 5px 8px;
	border-radius: 40px;
	background-color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/gh/nooct/smarative-badge@main/dist/script.js