Claymorphism
Inflated. Soft 3D. Playful. Friendly.
01 — The Cards
Basic Clay
Soft, floating container. Rounded corners (40px+). Real depth.
Featured
Highlight
Brand color background. Still uses deep soft shadows.
System Status
CPU Load98%
Memory42%
Activator Code:
css
1
2
3
4
.style-clay-card {
@apply bg-white rounded-[32px];
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
02 — The Buttons
Activator Code:
css
1
2
3
4
.style-clay-btn {
@apply rounded-xl transition-all;
box-shadow: 5px 5px 10px #b8b9be, -5px -5px 10px #ffffff;
}
03 — The Input
SECURE
Port 8080Activator Code:
css
1
2
3
4
.style-clay-card {
@apply bg-white rounded-[32px];
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
04 — The Table
| ID | User | Role | Status |
|---|---|---|---|
| #001 | Neo | The One | Active |
| #002 | Trinity | Admin | Active |
Activator Code:
css
1
2
3
4
.style-clay-card {
@apply bg-white rounded-[32px];
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
05 — The Modal
System Failure
Critical error detected in Sector 7G. Initiate protocol Omega?
Activator Code:
css
1
2
3
4
.style-clay-card {
@apply bg-white rounded-[32px];
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}