Neumorphism UI Lab · Visual Playground

01 — Buttons

Neumorphic Button

The foundational neumorphic pattern. Button is the same color as the background — only paired shadows (light top-left, dark bottom-right) give it shape. On :active, both shadows move inside for a pressed look.

paired box-shadow + :active inset BUTTON

<button class="neu-btn">Click me</button>

<!-- Must sit on the SAME background color -->
<body style="background: #e0e5ec">

.neu-btn {
  padding: 14px 32px;
  background: #e0e5ec;     /* SAME as parent background */
  border: none;
  border-radius: 14px;
  color: #4a5568;
  font-weight: 600;
  cursor: pointer;
  /* Paired shadows: light top-left, dark bottom-right */
  box-shadow:
    -6px -6px 14px #ffffff,   /* light */
     6px  6px 14px #a3b1c6;   /* dark  */
  transition: box-shadow .2s, transform .2s;
}
.neu-btn:hover {
  color: #f97316;
  /* Slightly bigger shadows = feels lifted more */
  box-shadow:
    -8px -8px 18px #ffffff,
     8px  8px 18px #a3b1c6;
}
/* Pressed: same shadows go INSIDE */
.neu-btn:active {
  box-shadow:
    inset -4px -4px 10px #ffffff,
    inset  4px  4px 10px #a3b1c6;
}

02 — Buttons

Icon Button

A round variant for navigation or controls. Uses the same shadow pairing as the text button — the circular shape makes the extrusion read especially well.

round neumorphic + icon BUTTON

<button class="neu-icon" aria-label="play">
  <i class="ph-fill ph-play"></i>
</button>

.neu-icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #e0e5ec;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #4a5568; font-size: 22px;
  box-shadow:
    -5px -5px 12px #ffffff,
     5px  5px 12px #a3b1c6;
  transition: all .2s;
}
.neu-icon:hover { color: #f97316; }
.neu-icon:active {
  box-shadow:
    inset -3px -3px 8px #ffffff,
    inset  3px  3px 8px #a3b1c6;
}

03 — Buttons

Toggle Button

A button that stays "pressed" after you click — for binary on/off states like bold/italic in a toolbar. Uses :has(input:checked) to flip between raised and inset shadows.

checkbox + :has() + inset shadows BUTTON

Bold Italic Underline

<label class="neu-toggle-btn">
  <input type="checkbox"/>
  Bold
</label>

.neu-toggle-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 12px;
  background: #e0e5ec;
  color: #4a5568; font-weight: 600;
  cursor: pointer;
  /* Raised state */
  box-shadow:
    -5px -5px 12px #ffffff,
     5px  5px 12px #a3b1c6;
  transition: all .25s;
}
.neu-toggle-btn input { opacity: 0; position: absolute; }

/* When the nested checkbox is checked, flip to inset + accent */
.neu-toggle-btn:has(input:checked) {
  color: #f97316;
  box-shadow:
    inset -4px -4px 10px #ffffff,
    inset  4px  4px 10px #a3b1c6;
}

04 — Inputs

Text Field

Inputs go the other way — they're recessed. Starting from the raised button and moving both shadows inside gives a pocket-like indent. On focus, add an accent ring.

inset shadows = pocket / recessed look INPUT

<input class="neu-input" placeholder="Your name"/>

.neu-input {
  padding: 14px 20px;
  background: #e0e5ec;
  border: none;
  border-radius: 12px;
  color: #4a5568;
  font-size: 14px;
  width: 280px;
  /* BOTH shadows INSIDE — pocket effect */
  box-shadow:
    inset -4px -4px 10px #ffffff,
    inset  4px  4px 10px #a3b1c6;
}
.neu-input:focus {
  outline: none;
  box-shadow:
    inset -5px -5px 12px #ffffff,
    inset  5px  5px 12px #a3b1c6,
    0 0 0 2px rgba(249,115,22,.3);   /* accent ring */
}

05 — Inputs

Search Bar

A compound component: the outer pill is recessed (inset shadow), and the submit icon inside is raised. Mixing inset + raised within one component is the essence of neumorphic UI.

recessed field + raised icon button INPUT

<div class="neu-search">
  <input type="text" placeholder="Search..."/>
  <button><i class="ph ph-magnifying-glass"></i></button>
</div>

.neu-search {
  display: flex; align-items: center; gap: 10px;
  background: #e0e5ec;
  padding: 8px 8px 8px 18px;
  border-radius: 40px; width: 320px;
  /* Outer shell: recessed */
  box-shadow:
    inset -3px -3px 8px #ffffff,
    inset  3px  3px 8px #a3b1c6;
}
.neu-search input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: #4a5568; font-size: 14px;
}
/* Inner button: raised (classic neumorphic button) */
.neu-search button {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #e0e5ec; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #f97316;
  box-shadow:
    -4px -4px 10px #ffffff,
     4px  4px 10px #a3b1c6;
}

06 — Inputs

Slider

Track is a recessed pill, fill is a gradient, and the thumb is a raised circle. The contrast between inset track and raised thumb is what gives the slider its "real" feel.

inset track + gradient fill + raised thumb INPUT

<div class="neu-slider">
  <div class="fill"></div>
  <div class="thumb"></div>
</div>

.neu-slider {
  position: relative;
  width: 260px; height: 14px;
  border-radius: 999px;
  background: #e0e5ec;
  box-shadow:
    inset -3px -3px 6px #ffffff,
    inset  3px  3px 6px #a3b1c6;
}
.neu-slider .fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 60%;                  /* progress */
  background: linear-gradient(90deg, #fdba74, #f97316);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(249,115,22,.4);
}
.neu-slider .thumb {
  position: absolute;
  top: 50%; left: 60%;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #e0e5ec;
  box-shadow:
    -3px -3px 8px #ffffff,
     3px  3px 8px #a3b1c6;
  cursor: grab;
}

07 — Toggles

Switch

Track is recessed. Thumb is raised, slides right, and tints to the accent color when checked. Same underlying formula as the slider — this time the "thumb" does all the work.

inset track + raised thumb + :checked TOGGLE

<label class="neu-switch">
  <input type="checkbox"/>
  <span class="track"></span>
  <span class="thumb"></span>
</label>

.neu-switch {
  position: relative;
  width: 64px; height: 32px;
  display: inline-block;
}
.neu-switch input { opacity: 0; position: absolute; }

/* Track: recessed */
.neu-switch .track {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: #e0e5ec;
  cursor: pointer;
  box-shadow:
    inset -3px -3px 6px #ffffff,
    inset  3px  3px 6px #a3b1c6;
}
/* Thumb: raised */
.neu-switch .thumb {
  position: absolute;
  top: 4px; left: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #e0e5ec;
  box-shadow:
    -2px -2px 6px #ffffff,
     2px  2px 6px #a3b1c6;
  transition:
    transform .3s cubic-bezier(.34,1.56,.64,1),
    background .3s;
}
/* Checked: slide + accent tint */
.neu-switch input:checked ~ .thumb {
  transform: translateX(32px);
  background: #f97316;
  box-shadow:
    -2px -2px 6px #fdba74,
     2px  2px 6px #c2410c;
}

08 — Toggles

Checkbox

Recessed square. When checked, an SVG tick draws itself in using stroke-dashoffset. Keeps the minimal neumorphic silhouette even when active.

inset box + SVG tick draw TOGGLE

Remember me Send updates

<label class="neu-check">
  <input type="checkbox"/>
  <span class="box">
    <svg class="tick" viewBox="0 0 14 14">
      <polyline points="1.5 7 6 11 13 3"/>
    </svg>
  </span>
  Remember me
</label>

.neu-check .box {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: #e0e5ec;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset -3px -3px 6px #ffffff,
    inset  3px  3px 6px #a3b1c6;
}
.neu-check .tick {
  width: 14px; height: 14px;
  stroke: #f97316; stroke-width: 3; fill: none;
  stroke-dasharray: 25;
  stroke-dashoffset: 25;      /* hidden */
  transition: stroke-dashoffset .35s ease;
}
.neu-check input:checked ~ .box .tick {
  stroke-dashoffset: 0;       /* draws in */
}

09 — Toggles

Radio

An inset circle with a small raised dot inside when selected. The dot pops in with a spring scale for feedback.

inset circle + raised dot + scale pop TOGGLE

Starter Pro Team

<label class="neu-radio">
  <input type="radio" name="plan"/>
  <span class="outer"><span class="dot"></span></span>
  Pro
</label>

.neu-radio .outer {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #e0e5ec;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset -3px -3px 6px #ffffff,
    inset  3px  3px 6px #a3b1c6;
}
.neu-radio .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #f97316;
  box-shadow: 2px 2px 4px rgba(0,0,0,.15);
  transform: scale(0);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.neu-radio input:checked ~ .outer .dot { transform: scale(1); }

10 — Containers

Card

A soft container — the button pattern scaled up. Use generous padding + larger border-radius and slightly deeper shadows so the card reads as a distinct elevated surface.

raised box-shadow on a padded div CARD

Weekly Summary

Your productivity is up 12% this week. Keep the streak going.

<div class="neu-card">
  <h4>Weekly Summary</h4>
  <p>Your productivity is up 12%...</p>
  <div class="card-row">
    <button class="neu-btn">View report</button>
    <label class="neu-switch">...</label>
  </div>
</div>

.neu-card {
  width: 300px;
  padding: 28px;
  border-radius: 20px;
  background: #e0e5ec;
  color: #4a5568;
  /* Deeper shadows than a button — reads as a bigger surface */
  box-shadow:
    -8px -8px 18px #ffffff,
     8px  8px 18px #a3b1c6;
}

11 — Containers

Stat Tile

Classic dashboard tile: the outer shell is raised, the ring (circular "bezel") inside is recessed. A little like a pressed-in badge — useful for KPIs or rankings.

nested raised + inset circles CARD

A+

92%

Credit Score

42

$1,280

Saved This Month

7d

18.4 km

Weekly Run

<div class="neu-stat">
  <div class="ring">A+</div>
  <div class="val">92%</div>
  <div class="lbl">Credit Score</div>
</div>

.neu-stat {
  width: 170px; padding: 22px 20px;
  border-radius: 18px;
  background: #e0e5ec;
  text-align: center;
  /* Outer tile: raised */
  box-shadow:
    -7px -7px 16px #ffffff,
     7px  7px 16px #a3b1c6;
}
.neu-stat .ring {
  width: 80px; height: 80px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #e0e5ec;
  display: flex; align-items: center; justify-content: center;
  color: #f97316; font-weight: 700;
  /* Inner ring: recessed */
  box-shadow:
    inset -4px -4px 8px #ffffff,
    inset  4px  4px 8px #a3b1c6;
}

12 — Containers

Mini Player

A composite that uses most of the patterns in this lab — raised card, raised cover, inset progress bar, raised icon buttons. Shows how neumorphic pieces combine into a real-looking UI.

card + cover + progress + icon buttons COMPOSITE

Golden Hour

The Morning Light

<div class="neu-player">
  <div class="cover"></div>
  <div class="title">Golden Hour</div>
  <div class="artist">The Morning Light</div>
  <div class="progress"><div class="progress-fill"></div></div>
  <div class="controls">
    <button class="neu-icon"><i class="ph-fill ph-skip-back"></i></button>
    <button class="neu-icon main"><i class="ph-fill ph-play"></i></button>
    <button class="neu-icon"><i class="ph-fill ph-skip-forward"></i></button>
  </div>
</div>

.neu-player {
  width: 300px; padding: 24px;
  border-radius: 20px;
  background: #e0e5ec;
  box-shadow:
    -8px -8px 18px #ffffff,
     8px  8px 18px #a3b1c6;
}
.neu-player .cover {
  width: 80px; height: 80px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fdba74, #f97316);
  box-shadow:
    -4px -4px 10px #ffffff,
     4px  4px 10px #a3b1c6;
}
/* Inset progress bar */
.neu-player .progress {
  height: 8px; border-radius: 999px;
  background: #e0e5ec;
  box-shadow:
    inset -2px -2px 5px #ffffff,
    inset  2px  2px 5px #a3b1c6;
  overflow: hidden;
}
.neu-player .progress-fill {
  height: 100%; width: 45%;
  background: linear-gradient(90deg, #fdba74, #f97316);
}