Hello, coders. In this post, you will learn, to create Glassmorphism affect Using HTML And CSS. Just copy the below code and paste it on the index.html, style.css file respectively.
index.html
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="utf-8" />
5: <meta name="viewport" content="width=device-width, initial-scale=1" />
6: <meta name="theme-color" content="#000000" />
7: <title>Glass Effect</title>
8: </head>
9: <body>
10: <div class="bg">
11:
12: <section class="panel">
13: <h2>This is glassmorphism</h2>
14: <div class="card__text">
15: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum tenetur vel accusamus. Cumque, iste asperiores. Perferendis odio magnam nisi, eos provident nobis maxime nostrum nam, ipsum blanditiis quasi saepe aliquid!</p>
16: </div>
17: <a href="https://themidom.in" class='button'>Button</a>
18: </section>
19:
20: </div>
21: </html>
22:
style.css
1: @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap");
2:
3: body {
4: font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
5: color: rgba(9, 19, 60, 1);
6: }
7:
8: .bg {
9: background-image: url(https://source.unsplash.com/n7a2OJDSZns/2200x1100);
10: background-position: center;
11: background-size: cover;
12: min-height: 100vh;
13: width: 100vw;
14: display: flex;
15: align-items: center;
16: justify-content: center;
17: }
18:
19: .panel {
20: background-image: linear-gradient(
21: to bottom right,
22: rgba(255, 255, 255, 0.3) 0%,
23: rgba(255, 255, 255, 0.1) 100%
24: );
25: backdrop-filter: blur(6px);
26: border-radius: 12px;
27: width: 320px;
28: border-top: 1px solid rgba(255, 255, 255, 0.5);
29: border-left: 1px solid rgba(255, 255, 255, 0.5);
30: padding: 60px;
31: box-shadow: rgba(255, 255, 255, 0.5) -20px -20px 45px inset,
32: rgba(0, 0, 0, 0.1) 10px 10px 20px, rgba(0, 0, 0, 0.06) 5px 5px 10px;
33: position: relative;
34:
35: &::before {
36: content: "";
37: display: block;
38: position: absolute;
39: top: 0;
40: left: 0;
41: right: 0;
42: bottom: 0;
43: background-image: linear-gradient(
44: 135deg,
45: rgba(255, 255, 255, 0) 0%,
46: rgba(255, 255, 255, 0.05) 40%,
47: rgba(255, 255, 255, 0) 40%
48: );
49: pointer-events: none;
50: }
51: }
52:
53: h2 {
54: font-size: 2em;
55: font-weight: 1000;
56: margin-top: 0;
57: }
58:
59: .card__text {
60: font-size: 14px;
61: line-height: 1.45;
62: opacity: 0.8;
63: argin-bottom: 2em;
64: }
65:
66: .button {
67: display: inline-block;
68: padding: 1.5em 3em;
69: background-image: linear-gradient(
70: -45deg,
71: rgba(9, 28, 60, 1) 0%,
72: rgba(67, 46, 103, 1) 100%
73: );
74: text-decoration: none;
75: font-weight: 900;
76: text-transform: uppercase;
77: font-size: 14px;
78: letter-spacing: 0.2em;
79: border-radius: 10em;
80: color: white;
81: }
82:
