Same two-shadow model as all raised surfaces — just scaled up. No additional logic. The backdrop blur does the heavy lifting for focus.
⬜ Neumorphic UI Kit v2
Correct directional shadows · Color-derived tints · Full widget reference
Base Color
Custom
Accent Color
Toggle Buttons
Pill Switches
Buttons
Soft directional tooltip
Checkboxes & Radio
Checkboxes
Radio Group
Text Inputs
Select & Combobox
▼
Neumorphic
Glassmorphism
Claymorphism
Brutalism
Retro / Skeu
Stepper
8
Sliders & Progress
Tab Bar & Tab Widget
Shadow model: two shadows, one light (-x,-y), one dark (+x,+y). Inset reverses. Pressed deepens. Shadow colors are actual RGB tints of --bg, not rgba overlays.
Sessions
2,418
↑ 12% from last hour
Response
84ms
↓ Excellent
[INFO] Server started on :3000 [INFO] Connected to database [WARN] Rate limit threshold 80% [INFO] Cache warm — 4200 entries [INFO] Health check passed ✓
Pill Variant
List View
Inbox
🔔
System UpdateVersion 3.2.1 ready
New
💬
Design ReviewAlice left 3 comments
3
📦
Deploy CompleteBuild succeeded · 2m ago
📊
Weekly ReportPerformance metrics ready
🔐
Security AlertNew login from Berlin, DE
!
Team
AL
BK
CJ
+5
8 members
Tags
FeaturedDesignCSSUI Kitv2
Scroll Areas
Vertical
📁 Documents
🖼 Images
🎵 Music
🎬 Videos
⬇ Downloads
⭐ Favorites
🗑 Trash
☁ Cloud Drive
🔒 Vault
📦 Archive
Horizontal
🌐
Web
12 items
📱
Mobile
8 items
🖥
Desktop
5 items
⌚
Watch
3 items
📺
TV
2 items
🎮
Gaming
9 items
Shadow System Reference
/*
NEUMORPHIC SHADOW SYSTEM — Correct directional model
Light source: TOP-LEFT corner. Everything derives from this.
--sh-light computed as rgb(r+30, g+30, b+30) from --bg
--sh-dark computed as rgb(r*0.80, g*0.80, b*0.80) from --bg
Using actual RGB tints, NOT rgba(white/black) overlays.
*//* Raised — convex surface */--neu-sm: -3px -3px 8px var(--sh-light), 3px 3px 8px var(--sh-dark);
--neu-md: -6px -6px 16px var(--sh-light), 6px 6px 16px var(--sh-dark);
--neu-lg: -10px -10px 28px var(--sh-light), 10px 10px 28px var(--sh-dark);
/* Inset — concave/sunken surface */--neu-inset: inset 4px 4px 10px var(--sh-dark), inset -4px -4px 10px var(--sh-light);
--neu-inset-lg: inset 6px 6px 16px var(--sh-dark), inset -6px -6px 16px var(--sh-light);
/* Pressed — deep inset, reduced light shadow */--neu-pressed: inset 3px 3px 7px var(--sh-dark), inset -2px -2px 5px var(--sh-light);
/* Gradient on raised surfaces reinforces the light direction:
background-image: linear-gradient(145deg, --sh-light 0%, --bg 45%, --sh-dark 100%)
Use on buttons, toggle buttons, slider thumbs, icon containers. */