Neumorphism
Soft plastic. Extruded shapes. Low contrast. Extremely tactile.
01 — The Cards
Basic Soft
Extruded from the surface. Seamless integration with background.
Featured
Pressed State
Inset shadows create a sunken, pressed effect. Perfect for active states.
System Status
CPU Load98%
Memory42%
Activator Code:
css
1
2
3
4
.style-neu-panel {
@apply rounded-[30px] bg-[#e0e5ec];
box-shadow: 20px 20px 60px #bec3c9, -20px -20px 60px #ffffff;
}
02 — The Buttons
Activator Code:
css
1
2
3
4
.style-neu-btn {
@apply rounded-full bg-[#e0e5ec] transition-all;
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}
03 — The Input
Secure
Port 8080Activator Code:
css
1
2
3
4
.style-neu-panel {
@apply rounded-[30px] bg-[#e0e5ec];
box-shadow: 20px 20px 60px #bec3c9, -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-neu-panel {
@apply rounded-[30px] bg-[#e0e5ec];
box-shadow: 20px 20px 60px #bec3c9, -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-neu-panel {
@apply rounded-[30px] bg-[#e0e5ec];
box-shadow: 20px 20px 60px #bec3c9, -20px -20px 60px #ffffff;
}