Neumorphism (Soft UI) Kit

28 soft, extruded components — buttons, toggles, cards, inputs and more — built from a single background color and paired light and dark shadows.

28 components · live preview · copy as HTML or JSX · free for commercial use

Neumorphism buttons

Primary Button

Neumorphism · Buttons

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <button class="bg-[#e0e5ec] text-slate-600 rounded-xl px-4 py-2 text-sm font-bold hover:shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff] transition-all">
  Primary Button
</button>
</div>

Outline Button

Neumorphism · Buttons

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <button class="bg-transparent text-slate-600  rounded-xl px-4 py-2 text-sm font-semibold transition-colors">
  Outline Button
</button>
</div>

Icon Button

Neumorphism · Buttons

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <button class="w-10 h-10 flex items-center justify-center rounded-full bg-[#e0e5ec]  text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff] transition-colors" aria-label="Settings">
  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
</button>
</div>

Accent Button

Neumorphism · Buttons

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <button class="bg-[#e0e5ec] text-slate-600 rounded-full px-5 py-2.5 text-sm font-bold shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff] transition-all">
  Get Started
</button>
</div>

Neumorphism badges

Status Pill

Neumorphism · Badges

Active

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <span class="inline-flex items-center gap-1.5 bg-[#e0e5ec] text-slate-600 rounded-full px-2.5 py-1 text-xs font-bold">
  <span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
  Active
</span>
</div>

Notification Badge

Neumorphism · Badges

🔔 3

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <span class="relative inline-flex">
  <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-[#e0e5ec]  text-slate-500">🔔</span>
  <span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-[#e0e5ec] text-slate-600 text-[10px] font-bold">3</span>
</span>
</div>

Neumorphism cards

Basic Card

Neumorphism · Cards

Card Title

A short description of this card's content goes here.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-[#e0e5ec]  rounded-xl p-5 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
  <h3 class="text-sm font-bold text-slate-600 mb-1">Card Title</h3>
  <p class="text-xs text-slate-500">A short description of this card's content goes here.</p>
</div>
</div>

Profile Card

Neumorphism · Cards

Jane Doe

Product Designer

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-[#e0e5ec]  rounded-xl p-5 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff] flex items-center gap-4">
  <div class="w-12 h-12 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] flex items-center justify-center text-slate-600 text-sm font-bold">JD</div>
  <div>
    <p class="text-sm font-bold text-slate-600">Jane Doe</p>
    <p class="text-xs text-slate-500">Product Designer</p>
  </div>
</div>
</div>

Pricing Card

Neumorphism · Cards

Pro

$19/mo

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-[#e0e5ec]  rounded-xl p-6 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
  <p class="text-xs font-bold text-slate-600 uppercase tracking-wide mb-2">Pro</p>
  <p class="text-2xl font-bold text-slate-600 mb-4">$19<span class="text-sm text-slate-500">/mo</span></p>
  <button class="w-full bg-[#e0e5ec] text-slate-600 rounded-xl px-4 py-2 text-sm font-bold hover:shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] transition-all">
    Choose Plan
  </button>
</div>
</div>

Neumorphism alerts

Info Alert

Neumorphism · Alerts

ℹ️ This is an informational message.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-[#e0e5ec]  rounded-xl p-3 text-xs text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
  ℹ️ This is an informational message.
</div>
</div>

Success Alert

Neumorphism · Alerts

✅ Your changes have been saved.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-[#e0e5ec]  rounded-xl p-3 text-xs text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
  ✅ Your changes have been saved.
</div>
</div>

Warning Alert

Neumorphism · Alerts

⚠️ This action can't be undone.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-[#e0e5ec]  rounded-xl p-3 text-xs text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
  ⚠️ This action can't be undone.
</div>
</div>

Error Alert

Neumorphism · Alerts

⛔ Something went wrong.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="max-w-xs bg-[#e0e5ec]  rounded-xl p-3 text-xs text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
  ⛔ Something went wrong.
</div>
</div>

Neumorphism forms

Text Input

Neumorphism · Forms

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-xl text-sm bg-[#e0e5ec] text-slate-600 placeholder:text-slate-400 shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] focus:outline-none" />
</div>

Textarea

Neumorphism · Forms

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-xl text-sm bg-[#e0e5ec] text-slate-600 placeholder:text-slate-400 shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] focus:outline-none"></textarea>
</div>

Select Dropdown

Neumorphism · Forms

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <select class="w-48 px-3 py-2 rounded-xl text-sm bg-[#e0e5ec] text-slate-600 placeholder:text-slate-400 shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] focus:outline-none">
  <option>United States</option>
  <option>South Korea</option>
  <option>Japan</option>
</select>
</div>

Checkbox

Neumorphism · Forms

I agree to the terms

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <label class="inline-flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="w-4 h-4 rounded text-slate-600" />
  <span class="text-sm text-slate-600">I agree to the terms</span>
</label>
</div>

Toggle Switch

Neumorphism · Forms

Uses Tailwind's peer/peer-checked variants — no JavaScript required.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <label class="inline-flex items-center cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <div class="w-11 h-6 rounded-full bg-[#e0e5ec] shadow-[inset_3px_3px_6px_#a3b1c6,inset_-3px_-3px_6px_#ffffff] peer-checked:bg-[#c9d6e3] transition-colors relative">
    <div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
  </div>
</label>
</div>

Neumorphism feedback

Spinner

Neumorphism · Feedback

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="w-8 h-8 rounded-full border-4 border-transparent border-t-slate-400 animate-spin"></div>
</div>

Progress Bar

Neumorphism · Feedback

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="w-48 h-2.5 rounded-full bg-[#e0e5ec] shadow-[inset_2px_2px_4px_#a3b1c6,inset_-2px_-2px_4px_#ffffff] overflow-hidden">
  <div class="h-full w-2/3 rounded-full bg-slate-400"></div>
</div>
</div>

Skeleton Loader

Neumorphism · Feedback

Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="w-48 space-y-2">
  <div class="h-4 w-3/4 rounded bg-[#e0e5ec] shadow-[inset_2px_2px_4px_#a3b1c6,inset_-2px_-2px_4px_#ffffff]"></div>
  <div class="h-4 w-1/2 rounded bg-[#e0e5ec] shadow-[inset_2px_2px_4px_#a3b1c6,inset_-2px_-2px_4px_#ffffff]"></div>
</div>
</div>

Toast Notification

Neumorphism · Feedback

Vanilla JavaScript — no framework required.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <button id="toast-trigger" class="bg-[#e0e5ec] text-slate-600 rounded-xl px-4 py-2 text-sm font-bold hover:shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] transition-all">
  Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-xl bg-[#e0e5ec]  text-slate-600 text-sm font-semibold px-4 py-3 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
  ✅ Saved successfully!
</div>
</div>

Neumorphism overlays

Accordion / FAQ Item

Neumorphism · Overlays

Refund policy? ▾

30-day money-back guarantee, no questions asked.

Uses the native <details>/<summary> elements — no JavaScript required.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <details class="w-48 rounded-xl  bg-[#e0e5ec] p-4 group">
  <summary class="cursor-pointer text-sm font-bold text-slate-600 list-none flex items-center justify-between">
    Refund policy?
    <span class="text-slate-500 group-open:rotate-180 transition-transform">▾</span>
  </summary>
  <p class="text-xs text-slate-500 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>
</div>

Modal Dialog

Neumorphism · Overlays

Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <button id="modal-open" class="bg-[#e0e5ec] text-slate-600 rounded-xl px-4 py-2 text-sm font-bold hover:shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] transition-all">
  Open Modal
</button>
<dialog id="modal" class="rounded-xl p-6 w-full max-w-xs bg-[#e0e5ec]  text-slate-600 backdrop:bg-black/50">
  <h3 class="text-sm font-bold mb-2">Confirm action</h3>
  <p class="text-xs text-slate-500 mb-4">Are you sure you want to continue?</p>
  <div class="flex gap-2 justify-end">
    <button id="modal-close" class="px-3 py-1.5 rounded-xl text-xs font-semibold text-slate-500">Cancel</button>
    <button class="px-3 py-1.5 rounded-xl text-xs font-bold bg-[#e0e5ec] text-slate-600">Confirm</button>
  </div>
</dialog>
</div>

Tooltip

Neumorphism · Overlays

Uses Tailwind's group/group-hover variants — no JavaScript required.

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <span class="relative inline-block group">
  <button class="w-8 h-8 flex items-center justify-center rounded-full bg-[#e0e5ec]  text-slate-600 text-xs font-bold">?</button>
  <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-xl bg-slate-700 text-white text-[10px] px-2.5 py-1.5">
    Helpful tooltip text
  </span>
</span>
</div>

Neumorphism avatars

Circle Avatar

Neumorphism · Avatars

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="w-10 h-10 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] flex items-center justify-center text-slate-600 text-sm font-bold">AB</div>
</div>

Avatar Group

Neumorphism · Avatars

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="flex -space-x-2">
  <div class="w-9 h-9 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] border-2 border-white flex items-center justify-center text-slate-600 text-xs font-bold">A</div>
  <div class="w-9 h-9 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] border-2 border-white flex items-center justify-center text-slate-600 text-xs font-bold">B</div>
  <div class="w-9 h-9 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] border-2 border-white flex items-center justify-center text-slate-600 text-xs font-bold">C</div>
  <div class="w-9 h-9 rounded-full bg-[#e0e5ec]  border-2 border-white flex items-center justify-center text-slate-500 text-xs font-bold">+5</div>
</div>
</div>

Avatar with Status

Neumorphism · Avatars

<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
  <div class="relative inline-block">
  <div class="w-10 h-10 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] flex items-center justify-center text-slate-600 text-sm font-bold">JS</div>
  <span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>
</div>

What is neumorphism?

Neumorphism, or soft UI, makes elements look as if they are pressed out of — or into — the background. Every component shares the background color (#e0e5ec here) and gets two shadows: a dark one toward the bottom-right and a white one toward the top-left. Inset versions of the same shadows create the pressed look used for inputs and hovered buttons.

When to use it

Neumorphism suits small, focused interfaces such as smart-home controls, music players, calculators and portfolio concepts, where a tactile look adds personality. It is a poor fit for dense, data-heavy dashboards, because low-contrast edges make many elements blur together.

Accessibility notes

The style's biggest weakness is contrast: component boundaries come only from subtle shadows, which many users cannot see. Keep text dark (slate-600 or darker), add a visible focus ring, and give primary actions a stronger color or border so they are recognizable without relying on shadows. Test the result with a contrast checker.

← Back to the full UI Component Library

Frequently Asked Questions

How do you create a neumorphism effect in CSS?↓

Give the element the same background color as its parent and apply two box-shadows: a darker shadow offset to the bottom-right and a lighter one offset to the top-left — for example shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff] in Tailwind.

Is neumorphism accessible?↓

Not by default. Its low-contrast edges can make controls hard to see, so pair it with dark text, clear focus states and a stronger visual cue on primary buttons.

Does neumorphism work in dark mode?↓

Yes, but you need a new pair of shadows: one darker and one slightly lighter than the dark background, instead of pure white.

Last updated: November 7, 2026