13 CSS Neumorphism & Soft UI Designs

Soft UI Button Lab

A cool-slate showcase panel demonstrating the full neumorphic vocabulary. Section 1 shows the three core shadow states (resting, hover-lifted, pressed-inset) side-by-side with live box-shadow code snippets beneath each. Section 2 is a shapes row — pill, accent-filled, ghost outline, icon squares, FAB, danger, success, plus a spinner-loading state. Section 3 has draggable toggles, neumorphic checkboxes, and a segmented radio control. Syne + DM Sans typefaces. Best for design-system docs, button libraries, component galleries.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="nm-btn" aria-label="Soft UI button lab">
  <div class="card">

  <div>
    <div class="sec-tag">01 — Shadow State Anatomy</div>
    <div class="states-row">

      <div class="state-demo">
        <button type="button" class="btn-resting">Button</button>
        <span class="state-label">○ Resting</span>
        <div class="shadow-diagram">
          <strong>box-shadow:</strong>
          <code>8px 8px 18px #a3b1c6,<br />-8px -8px 18px #ffffff;</code>
          Extruded. Light from top-left, dark bottom-right.
        </div>
      </div>

      <div class="state-demo">
        <button type="button" class="btn-hover-state">Button</button>
        <span class="state-label">↑ Hover / Lift</span>
        <div class="shadow-diagram">
          <strong>box-shadow:</strong>
          <code>12px 12px 26px #a3b1c6,<br />-12px -12px 26px #ffffff;</code>
          Shadows grow — surface rises.
        </div>
      </div>

      <div class="state-demo">
        <button type="button" class="btn-pressed-state">Button</button>
        <span class="state-label">⬤ Pressed</span>
        <div class="shadow-diagram">
          <strong>box-shadow:</strong>
          <code>inset 6px 6px 14px #a3b1c6,<br />inset -6px -6px 14px #fff;</code>
          Inverted inset — surface sinks in.
        </div>
      </div>

    </div>
  </div>

  <div class="divider"></div>

  <div>
    <div class="sec-tag">02 — Shapes &amp; Variants</div>
    <div class="shapes-row">
      <button type="button" class="btn-resting">Default</button>
      <button type="button" class="btn-pill">Pill Shape</button>
      <button type="button" class="btn-accent">★ Primary</button>
      <button type="button" class="btn-ghost">Outline</button>
      <button type="button" class="btn-sq" aria-label="Edit">✏️</button>
      <button type="button" class="btn-sq" aria-label="Search">🔍</button>
      <button type="button" class="btn-sq" aria-label="Settings">⚙</button>
      <button type="button" class="btn-circle" aria-label="Play">▪</button>
      <button type="button" class="btn-fab" aria-label="Add">＋</button>
      <button type="button" class="btn-danger">Delete</button>
      <button type="button" class="btn-success">Confirm</button>
      <button type="button" class="btn-loading"><span class="spinner" aria-hidden="true"></span>Loading…</button>
    </div>
  </div>

  <div class="divider"></div>

  <div>
    <div class="sec-tag">03 — Toggles · Radios · Checks</div>
    <div class="toggles-row">

      <div class="toggle-wrap">
        <button type="button" class="toggle on" data-nm-btn-toggle aria-pressed="true">
          <span class="toggle-track" aria-hidden="true"></span>
          <span class="toggle-thumb" aria-hidden="true"></span>
        </button>
        <span class="toggle-lbl">Enabled</span>
      </div>

      <div class="toggle-wrap">
        <button type="button" class="toggle" data-nm-btn-toggle aria-pressed="false">
          <span class="toggle-track" aria-hidden="true"></span>
          <span class="toggle-thumb" aria-hidden="true"></span>
        </button>
        <span class="toggle-lbl">Dark Mode</span>
      </div>

      <div class="toggle-wrap">
        <button type="button" class="toggle on" data-nm-btn-toggle aria-pressed="true">
          <span class="toggle-track" aria-hidden="true"></span>
          <span class="toggle-thumb" aria-hidden="true"></span>
        </button>
        <span class="toggle-lbl">Notifications</span>
      </div>

      <button type="button" class="btn-check checked" data-nm-btn-check>
        <span class="btn-check-box">✓</span>
        Completed
      </button>

      <button type="button" class="btn-check" data-nm-btn-check>
        <span class="btn-check-box"></span>
        Add to cart
      </button>

      <div class="radio-group" role="radiogroup">
        <button type="button" class="radio-opt active" data-nm-btn-radio>Daily</button>
        <button type="button" class="radio-opt" data-nm-btn-radio>Weekly</button>
        <button type="button" class="radio-opt" data-nm-btn-radio>Monthly</button>
      </div>

    </div>
  </div>

  </div>
</section>
/* ─── 04 Soft UI Button Lab — cool slate showcase panel ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

.nm-btn {
  --nm-btn-bg:   #e0e5ec;
  --nm-btn-sd:   #a3b1c6;
  --nm-btn-sl:   #ffffff;
  --nm-btn-ib:   #d6dce7;
  --nm-btn-acc:  #6c5ce7;
  --nm-btn-ac2:  #a29bfe;
  --nm-btn-txt:  #4a5568;
  --nm-btn-txt2: #1a202c;
  --nm-btn-r:    16px;
  --nm-btn-neu-out:  8px 8px 18px var(--nm-btn-sd), -8px -8px 18px var(--nm-btn-sl);
  --nm-btn-neu-in:   inset 6px 6px 14px var(--nm-btn-sd), inset -6px -6px 14px var(--nm-btn-sl);
  --nm-btn-neu-sm:   5px 5px 12px var(--nm-btn-sd), -5px -5px 12px var(--nm-btn-sl);
  --nm-btn-neu-sm-in: inset 4px 4px 9px var(--nm-btn-sd), inset -4px -4px 9px var(--nm-btn-sl);

  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--nm-btn-bg);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--nm-btn-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-btn *,
.nm-btn *::before,
.nm-btn *::after { box-sizing: border-box; }

.nm-btn .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-btn-bg);
  border-radius: 40px;
  padding: 48px 44px;
  box-shadow: 22px 22px 54px var(--nm-btn-sd), -22px -22px 54px var(--nm-btn-sl);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.nm-btn .sec-tag {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-btn-txt);
  opacity: 0.6;
  margin-bottom: 20px;
}

/* Section 1 — Three states */
.nm-btn .states-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.nm-btn .state-demo {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.nm-btn .state-label {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nm-btn-txt);
  opacity: 0.7;
}

.nm-btn .btn-resting {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 16px 40px;
  border-radius: var(--nm-btn-r);
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--nm-btn-txt2);
  box-shadow: var(--nm-btn-neu-out);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  letter-spacing: 0.3px;
  user-select: none;
}
.nm-btn .btn-resting:hover {
  box-shadow: 10px 10px 22px var(--nm-btn-sd), -10px -10px 22px var(--nm-btn-sl);
  transform: translateY(-1px);
}
.nm-btn .btn-resting:active {
  box-shadow: var(--nm-btn-neu-in);
  transform: translateY(0);
}

.nm-btn .btn-hover-state,
.nm-btn .btn-pressed-state {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 16px 40px;
  border-radius: var(--nm-btn-r);
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--nm-btn-txt2);
  letter-spacing: 0.3px;
}
.nm-btn .btn-hover-state {
  box-shadow: 12px 12px 26px var(--nm-btn-sd), -12px -12px 26px var(--nm-btn-sl);
  transform: translateY(-1px);
}
.nm-btn .btn-pressed-state {
  box-shadow: var(--nm-btn-neu-in);
}

.nm-btn .shadow-diagram {
  width: 100%;
  max-width: 196px;
  background: var(--nm-btn-ib);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--nm-btn-neu-sm-in);
  font-family: 'DM Sans', ui-monospace, monospace;
  font-size: 9px;
  color: var(--nm-btn-txt);
  line-height: 1.6;
}
.nm-btn .shadow-diagram code {
  display: block;
  font-size: 8px;
  color: var(--nm-btn-acc);
  opacity: 0.9;
  margin-top: 4px;
  line-height: 1.5;
}

/* Section 2 — Shapes */
.nm-btn .shapes-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.nm-btn .btn-pill {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-btn-txt2);
  box-shadow: var(--nm-btn-neu-sm);
  transition: all 0.18s ease;
  letter-spacing: 0.3px;
}
.nm-btn .btn-pill:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl);
  transform: translateY(-1px);
}
.nm-btn .btn-pill:active {
  box-shadow: var(--nm-btn-neu-sm-in);
  transform: scale(0.98);
}

.nm-btn .btn-accent {
  border: none;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--nm-btn-acc), #5040cc);
  box-shadow: 8px 8px 18px rgba(108, 92, 231, 0.4), -4px -4px 12px var(--nm-btn-sl);
  transition: all 0.18s ease;
  letter-spacing: 0.3px;
}
.nm-btn .btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 10px 14px 24px rgba(108, 92, 231, 0.45), -4px -4px 12px var(--nm-btn-sl);
}
.nm-btn .btn-accent:active {
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.25);
  transform: scale(0.97);
}

.nm-btn .btn-sq {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--nm-btn-neu-sm);
  transition: all 0.15s ease;
  color: var(--nm-btn-txt2);
}
.nm-btn .btn-sq:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl);
}
.nm-btn .btn-sq:active {
  box-shadow: var(--nm-btn-neu-sm-in);
}

.nm-btn .btn-circle {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--nm-btn-neu-sm);
  transition: all 0.15s ease;
  color: var(--nm-btn-txt2);
}
.nm-btn .btn-circle:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl);
  transform: scale(1.05);
}
.nm-btn .btn-circle:active {
  box-shadow: var(--nm-btn-neu-sm-in);
  transform: scale(0.97);
}

.nm-btn .btn-fab {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 12px 12px 28px var(--nm-btn-sd), -12px -12px 28px var(--nm-btn-sl);
  transition: all 0.2s ease;
  color: var(--nm-btn-txt2);
}
.nm-btn .btn-fab:hover {
  box-shadow: 14px 14px 32px var(--nm-btn-sd), -14px -14px 32px var(--nm-btn-sl);
  transform: scale(1.05);
}
.nm-btn .btn-fab:active {
  box-shadow: inset 8px 8px 18px var(--nm-btn-sd), inset -8px -8px 18px var(--nm-btn-sl);
}

.nm-btn .btn-ghost {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 13px 28px;
  border-radius: 100px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-btn-acc);
  box-shadow: var(--nm-btn-neu-sm), inset 0 0 0 2px rgba(108, 92, 231, 0.3);
  transition: all 0.18s ease;
  letter-spacing: 0.3px;
}
.nm-btn .btn-ghost:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl), inset 0 0 0 2px rgba(108, 92, 231, 0.6);
}
.nm-btn .btn-ghost:active {
  box-shadow: inset 4px 4px 9px var(--nm-btn-sd), inset -4px -4px 9px var(--nm-btn-sl), inset 0 0 0 2px rgba(108, 92, 231, 0.5);
}

.nm-btn .btn-danger,
.nm-btn .btn-success {
  border: none;
  cursor: pointer;
  padding: 13px 24px;
  border-radius: 14px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  background: var(--nm-btn-bg);
  box-shadow: var(--nm-btn-neu-sm);
  transition: all 0.15s;
}
.nm-btn .btn-danger  { color: #c0392b; }
.nm-btn .btn-success { color: #27ae60; }
.nm-btn .btn-danger:hover,
.nm-btn .btn-success:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl);
}
.nm-btn .btn-danger:active,
.nm-btn .btn-success:active {
  box-shadow: var(--nm-btn-neu-sm-in);
}

.nm-btn .btn-loading {
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-btn-txt);
  box-shadow: var(--nm-btn-neu-in);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.3px;
}
.nm-btn .spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--nm-btn-sd);
  border-top-color: var(--nm-btn-acc);
  animation: nm-btn-spin 0.8s linear infinite;
}
@keyframes nm-btn-spin {
  to { transform: rotate(360deg); }
}

/* Section 3 — Toggles */
.nm-btn .toggles-row {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.nm-btn .toggle-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nm-btn .toggle {
  position: relative;
  width: 64px;
  height: 34px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}
.nm-btn .toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 17px;
  background: var(--nm-btn-bg);
  box-shadow: var(--nm-btn-neu-sm-in);
  transition: all 0.3s ease;
}
.nm-btn .toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nm-btn-bg);
  box-shadow: var(--nm-btn-neu-sm);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}
.nm-btn .toggle.on .toggle-thumb {
  left: 34px;
  background: linear-gradient(145deg, var(--nm-btn-acc), #5040cc);
  box-shadow: 4px 4px 10px rgba(108, 92, 231, 0.4), -2px -2px 6px var(--nm-btn-sl);
}
.nm-btn .toggle-lbl {
  font-size: 13px;
  font-weight: 500;
  color: var(--nm-btn-txt2);
}

.nm-btn .btn-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--nm-btn-bg);
  border: none;
  cursor: pointer;
  padding: 12px 22px;
  border-radius: 14px;
  box-shadow: var(--nm-btn-neu-sm);
  transition: all 0.15s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--nm-btn-txt2);
}
.nm-btn .btn-check-box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--nm-btn-bg);
  box-shadow: var(--nm-btn-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.nm-btn .btn-check.checked .btn-check-box {
  background: linear-gradient(145deg, var(--nm-btn-acc), #5040cc);
  box-shadow: 3px 3px 8px rgba(108, 92, 231, 0.4);
  color: #fff;
}
.nm-btn .btn-check:hover {
  box-shadow: 7px 7px 16px var(--nm-btn-sd), -7px -7px 16px var(--nm-btn-sl);
}

.nm-btn .radio-group {
  display: inline-flex;
  background: var(--nm-btn-bg);
  border-radius: 14px;
  padding: 5px;
  box-shadow: var(--nm-btn-neu-sm-in);
  gap: 4px;
}
.nm-btn .radio-opt {
  border: none;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--nm-btn-txt);
  background: transparent;
  transition: all 0.2s ease;
}
.nm-btn .radio-opt.active {
  background: var(--nm-btn-bg);
  box-shadow: var(--nm-btn-neu-sm);
  color: var(--nm-btn-acc);
  font-weight: 600;
}

.nm-btn .divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--nm-btn-sd), transparent);
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .nm-btn .spinner { animation: none; }
  .nm-btn .toggle-thumb,
  .nm-btn .btn-resting,
  .nm-btn .btn-pill,
  .nm-btn .btn-accent,
  .nm-btn .btn-fab,
  .nm-btn .btn-circle,
  .nm-btn .btn-sq { transition: none; }
}

@media (max-width: 720px) {
  .nm-btn .card { padding: 32px 22px; }
  .nm-btn .states-row { gap: 24px; }
}
(() => {
  const root = document.querySelector('.nm-btn');
  if (!root) return;

  root.querySelectorAll('[data-nm-btn-toggle]').forEach(btn => {
    btn.addEventListener('click', () => {
      const on = btn.classList.toggle('on');
      btn.setAttribute('aria-pressed', String(on));
    });
  });

  root.querySelectorAll('[data-nm-btn-check]').forEach(btn => {
    btn.addEventListener('click', () => {
      const checked = btn.classList.toggle('checked');
      const box = btn.querySelector('.btn-check-box');
      if (box) box.textContent = checked ? '✓' : '';
    });
  });

  root.querySelectorAll('.radio-group').forEach(group => {
    group.querySelectorAll('[data-nm-btn-radio]').forEach(opt => {
      opt.addEventListener('click', () => {
        group.querySelectorAll('.radio-opt').forEach(o => o.classList.remove('active'));
        opt.classList.add('active');
      });
    });
  });
})();

More from 13 CSS Neumorphism & Soft UI Designs

Aurum Finance DashboardSoft UI Form ControlsAurum Profile & TestimonialBreatheVinyl PlayerNexusAudio Control SuiteSunken Form StudioSmart IoT Control PanelSoft UI CalculatorSky WidgetsDark Mode Neumorphism
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →