Glassmorphism
Translucency. Blur. Subtle borders. Floating in space.
01 — The Cards
Basic Glass
Frosted glass pane. Preserves context of the background.
Highlight Pane
Tinted glass for emphasis. Uses brand color transparency.
System Status
CPU Load98%
Memory42%
DiskFULL
Activator Code:
css
1
2
3
4
5
6
.style-glass-panel {
@apply backdrop-blur-md shadow-xl;
background-color: color-mix(in srgb, var(--surface) 10%, transparent);
border-width: 1px;
border-color: rgba(255, 255, 255, 0.2);
}
02 — The Buttons
Activator Code:
css
1
2
3
4
5
6
7
.style-glass-btn {
@apply backdrop-blur-sm shadow-lg;
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.4);
}
03 — The Input
SECURE
PORT 8080Activator Code:
css
1
2
3
4
5
6
7
.style-glass-input {
@apply transition-all focus:outline-none focus:ring-2;
background-color: rgba(0, 0, 0, 0.2);
border-width: 1px;
border-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
04 — The Table
| ID | User | Role | Status |
|---|---|---|---|
| #001 | Neo | The One | Active |
| #002 | Trinity | Admin | Active |
| #003 | Smith | Agent | Rogue |
Activator Code:
css
1
2
3
4
5
6
.style-glass-panel {
@apply backdrop-blur-md shadow-xl;
background-color: color-mix(in srgb, var(--surface) 10%, transparent);
border-width: 1px;
border-color: rgba(255, 255, 255, 0.2);
}
05 — The Modal
System Failure
Critical error detected in Sector 7G. Initiate protocol Omega?
Activator Code:
css
1
2
3
4
5
6
.style-glass-panel {
@apply backdrop-blur-md shadow-xl;
background-color: color-mix(in srgb, var(--surface) 10%, transparent);
border-width: 1px;
border-color: rgba(255, 255, 255, 0.2);
}