Neomorphism Dashboard

A soft, tactile dashboard interface with raised and inset elements that appear to extrude from the background.

Preview of Neomorphism Dashboard
Works with:ClaudeChatGPTv0CursorBolt
neomorphismsoft-uidashboardmodern3d-effect

Prompt

Create a neomorphism (soft UI) styled dashboard application. The design should feel tactile and 3-dimensional, as if elements are extruding from or pressed into the background surface.


Design Requirements

  • Background: Flat matte background color (#e0e5ec) — the entire page shares this base
  • Elements: All cards, buttons, and inputs use dual box-shadows to create the raised/inset effect:
  • - Raised: box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff

    - Inset/Pressed: box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff

  • Color Palette: Monochromatic base with accent color (#6c63ff) for active states and charts
  • Typography: DM Sans, medium weight, subtle color contrast against base
  • Icons: Soft, rounded icons that match the organic feel

  • Sections to Include

  • Sidebar Navigation — Vertical nav with neomorphic icons, active state shows inset shadow
  • Top Bar — Search input (inset), notifications bell, user avatar
  • Stats Cards Row — 4 raised cards showing KPIs with icons and trend arrows
  • Chart Section — Area chart with gradient fill, raised container
  • Recent Activity — List with alternating raised/flat rows
  • Quick Actions — Grid of circular neomorphic buttons

  • Technical Details

  • CSS custom properties for all shadow values (easy theming)
  • Smooth transitions between raised and pressed states on click
  • Responsive: sidebar collapses to bottom nav on mobile
  • Use CSS variables for the dual-shadow system
  • Related Prompts