Glass panel overlay

Based on @ruido.98

by PhilQ

HTML

<div class="shape triangle"></div>
<div class="shape square"></div>
<div class="shape circle"></div>

<div class="panel">
	<div class="glass"></div>
	<div class="glass"></div>
	<div class="glass"></div>
	<div class="glass"></div>
	<div class="glass"></div>
</div>

CSS

*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Material colors */
/*
:root {
	--transparent: transparent;
	--black: #000000;
	--white: #ffffff;
	--red: #f44336;
	--red-50: #ffebee;
	--red-100: #ffcdd2;
	--red-200: #ef9a9a;
	--red-300: #e57373;
	--red-400: #ef5350;
	--red-500: #f44336;
	--red-600: #e53935;
	--red-700: #d32f2f;
	--red-800: #c62828;
	--red-900: #b71c1c;
	--red-100-accent: #ff8a80;
	--red-200-accent: #ff5252;
	--red-400-accent: #ff1744;
	--red-700-accent: #d50000;
	--pink: #e91e63;
	--pink-50: #fce4ec;
	--pink-100: #f8bbd0;
	--pink-200: #f48fb1;
	--pink-300: #f06292;
	--pink-400: #ec407a;
	--pink-500: #e91e63;
	--pink-600: #d81b60;
	--pink-700: #c2185b;
	--pink-800: #ad1457;
	--pink-900: #880e4f;
	--pink-100-accent: #ff80ab;
	--pink-200-accent: #ff4081;
	--pink-400-accent: #f50057;
	--pink-700-accent: #c51162;
	--purple: #9c27b0;
	--purple-50: #f3e5f5;
	--purple-100: #e1bee7;
	--purple-200: #ce93d8;
	--purple-300: #ba68c8;
	--purple-400: #ab47bc;
	--purple-500: #9c27b0;
	--purple-600: #8e24aa;
	--purple-700: #7b1fa2;
	--purple-800: #6a1b9a;
	--purple-900: #4a148c;
	--purple-100-accent: #ea80fc;
	--purple-200-accent: #e040fb;
	--purple-400-accent: #d500f9;
	--purple-700-accent: #aa00ff;
	--deep-purple: #673ab7;
	--deep-purple-50: #ede7f6;
	--deep-purple-100: #d1c4e9;
	--deep-purple-200: #b39ddb;
	--deep-purple-300: #9575cd;
	--deep-purple-400: #7e57c2;
	--deep-purple-500: #673ab7;
	--deep-purple-600: #5e35b1;
	--deep-purple-700: #512da8;
	--deep-purple-800: #4527a0;
	--deep-purple-900: #311b92;
	--deep-purple-100-accent: #b388ff;
	--deep-purple-200-accent: #7c4dff;
	--deep-purple-400-accent: #651fff;
	--deep-purple-700-accent: #6200ea;
	--indigo: #3f51b5;
	--indigo-50: #e8eaf6;
	--indigo-100: #c5cae9;
	--indigo-200: #9fa8da;
	--indigo-300: #7986cb;
	--indigo-400: #5c6bc0;
	--indigo-500: #3f51b5;
	--indigo-600: #3949ab;
	--indigo-700: #303f9f;
	--indigo-800: #283593;
	--indigo-900: #1a237e;
	--indigo-100-accent:...