Neumorph Button

neumorphic x shadow

Neumorphic button with soft pressed/raised shadows. From Cult UI.

buttonneumorphicshadowcultui

Code

button-neu.tsx

export function NeumorphButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="rounded-2xl bg-surface px-8 py-3 text-sm font-medium
      shadow-[6px_6px_12px_rgba(0,0,0,0.15),-4px_-4px_10px_rgba(255,255,255,0.05)]
      transition-shadow active:shadow-[inset_4px_4px_8px_rgba(0,0,0,0.2),inset_-2px_-2px_6px_rgba(255,255,255,0.05)]">
      {children}
    </button>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Neumorph Button component and wire it to my accent.”