Glassmorphism Effect

1.glass {
2  background: rgba(255, 255, 255, 0.1);
3  backdrop-filter: blur(10px);
4  -webkit-backdrop-filter: blur(10px);
5  border: 1px solid rgba(255, 255, 255, 0.2);
6  border-radius: 12px;
7  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
8}
9
10/* Dark mode variant */
11.glass-dark {
12  background: rgba(0, 0, 0, 0.3);
13  backdrop-filter: blur(10px);
14  -webkit-backdrop-filter: blur(10px);
15  border: 1px solid rgba(255, 255, 255, 0.1);
16  border-radius: 12px;
17  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
18}
19
20/* Stronger blur effect */
21.glass-strong {
22  background: rgba(255, 255, 255, 0.15);
23  backdrop-filter: blur(20px);
24  -webkit-backdrop-filter: blur(20px);
25  border: 1px solid rgba(255, 255, 255, 0.3);
26  border-radius: 16px;
27}