-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
104 lines (103 loc) · 4.34 KB
/
Copy pathindex.html
File metadata and controls
104 lines (103 loc) · 4.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>36 Glassmorphism</title>
<style>
:root {
--ink: #ffffff;
--muted: rgba(255,255,255,0.7);
--glass-bg: rgba(255,255,255,0.15);
--glass-border: rgba(255,255,255,0.3);
--accent: #ff6ec4;
--accent-2: #7873f5;
--font: "Inter", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
color: var(--ink);
font-family: var(--font);
font-size: 15px;
padding: 40px;
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
body::before, body::after, .orb {
content: "";
position: fixed;
border-radius: 50%;
filter: blur(80px);
opacity: 0.7;
pointer-events: none;
z-index: 0;
}
body::before { width: 500px; height: 500px; background: var(--accent); top: -100px; left: -100px; }
body::after { width: 400px; height: 400px; background: var(--accent-2); bottom: -100px; right: -100px; }
.orb { width: 300px; height: 300px; background: #00d4ff; top: 40%; right: 30%; filter: blur(100px); opacity: 0.5; }
.page { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.card {
background: var(--glass-bg);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 28px;
margin-bottom: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}
h1 { font-weight: 300; font-size: 48px; letter-spacing: -1px; margin-bottom: 8px; }
h1 strong { font-weight: 700; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sub { color: var(--muted); margin-bottom: 20px; }
h2 { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
p { line-height: 1.6; margin-bottom: 8px; color: var(--ink); }
.btn {
font-family: var(--font);
font-weight: 600;
font-size: 14px;
background: var(--glass-bg);
backdrop-filter: blur(10px);
color: var(--ink);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 10px 22px;
cursor: pointer;
}
.btn:hover { background: rgba(255,255,255,0.25); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 4px 20px rgba(255,110,196,0.4); }
.input { font-family: var(--font); font-size: 15px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); color: var(--ink); border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px 16px; width: 340px; }
.input::placeholder { color: rgba(255,255,255,0.5); }
.input:focus { outline: none; border-color: var(--accent); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.swatch { width: 70px; height: 70px; border-radius: 14px; display: inline-block; border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
</style>
</head>
<body>
<div class="orb"></div>
<div class="page">
<div class="card">
<h1>frosted <strong>glass</strong></h1>
<div class="sub">Backdrop blur. Translucent surfaces. Colorful orbs behind. The Big Sur look.</div>
<p>Every surface filters the light behind it. 20% white tint plus heavy blur plus a thin border highlight.</p>
</div>
<div class="card">
<h2>Input</h2>
<div class="row"><input class="input" placeholder="you@cloud.app" value="hello@glass.app"></div>
<h2>Buttons</h2>
<div class="row">
<button class="btn btn-primary">Continue</button>
<button class="btn">Maybe Later</button>
<button class="btn">Cancel</button>
</div>
<h2>Palette</h2>
<div class="row">
<span class="swatch" style="background:linear-gradient(135deg, var(--accent), var(--accent-2))"></span>
<span class="swatch" style="background:linear-gradient(135deg, #00d4ff, #0099ff)"></span>
<span class="swatch" style="background:linear-gradient(135deg, #f7ba2c, #ea5459)"></span>
<span class="swatch" style="background:rgba(255,255,255,0.15)"></span>
</div>
</div>
</div>
</body>
</html>