One material
Background and controls share the same color. Only light and shadow separate them.
Soft plastic interfaces where controls seem pushed out of, or pressed into, the same surface. Light from the top left and shade on the bottom right do all the work.
Open the kit Copy promptNeumorphism, short for new skeuomorphism, models controls as soft extrusions of a single material. It looks tactile and calm, and it tests the limits of contrast.
Background and controls share the same color. Only light and shadow separate them.
A dark shadow down-right and a white shadow up-left make a shape rise out of the surface.
The same shadows turned inward show pressed buttons, fields and active states.
Soft grays and one accent color. The calm look comes at a cost for accessibility.
Neumorphism was a brief, viral reaction against years of flat design.
Early smartphone interfaces imitate leather, wood and glossy buttons to make touchscreens feel familiar.
iOS 7 and Material Design (2014) strip away texture and depth in favour of flat color.
A soft, extruded banking app concept by designer Alexander Plyuto spreads across Dribbble, and designers coin neumorphism.
Accessibility experts point out that shadow-only buttons are hard to see. Most teams keep the style for small moments.
Soft shading survives in smart home controls, music apps and hardware-inspired widgets.
Neumorphic motion is tactile. Controls sink in when pressed and rise when released, like soft rubber keys.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Thermostats and light dimmers imitate physical knobs and switches.
Play buttons and sliders feel like hardware on a soft device.
Small single-purpose tools use soft keys that ask to be pressed.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
One gray surface with a darker shade and a pure white highlight. A single indigo marks action and state. Tap a swatch to copy its hex value.
:root{
--surface: #E4E9F0;
--shade: #C2C9D3;
--highlight: #FFFFFF;
--indigo: #3F5FCF;
--ink: #2F3A4C;
--slate: #5A6578;
}A soft rounded display face matches the pillowy surfaces. Body text uses a dark, sturdy sans to fight the low contrast.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Varela Round",system-ui,sans-serif;
--font-b: "Mulish",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(42px, 9vw, 81px);
--fs-1: 41.5px; --fs-2: 33.2px;
--fs-3: 26.6px; --fs-4: 21.2px;
--fs-body: 17px; --fs-sm: 13.6px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
line-height: 1.15;
}
/* fonts: Varela Round and Mulish */Give elements space. Shadows extend 10 to 20 pixels, and crowded layouts smear them together.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}No borders. Everything is defined by paired shadows, outward for raised and inward for pressed.
:root {
--radius: 22px;
--radius-sm: 14px;
--bw: 0px;
--shadow: 9px 9px 18px #C2C9D3, -9px -9px 18px #FFFFFF;
--shadow-sm: 5px 5px 10px #C2C9D3, -5px -5px 10px #FFFFFF;
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Neumorphism kit · Anti-Boring */
:root{
--bg:#E4E9F0;
--surface:#E4E9F0;
--surface2:#E4E9F0;
--fg:#2F3A4C;
--muted:#5A6578;
--accent:#3F5FCF;
--accent-fg:#FFFFFF;
--accent2:#E4E9F0;
--accent2-fg:#2F3A4C;
--border:transparent;
--bw:0px;
--radius:22px;
--radius-sm:14px;
--shadow:9px 9px 18px #C2C9D3, -9px -9px 18px #FFFFFF;
--shadow-sm:5px 5px 10px #C2C9D3, -5px -5px 10px #FFFFFF;
--font-d:"Varela Round",system-ui,sans-serif;
--font-b:"Mulish",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:0;
--h-case:none;
--h-style:normal;
--h-lh:1.15;
--gap:24px;
--pad:24px;
--focus:rgba(63,95,207,.3);
--ok:#1E7A55;
--warn:#8A5A00;
--danger:#B8323F;
--info:#3F5FCF;
--field-bg:#E4E9F0;
--field-shadow:inset 5px 5px 10px #C2C9D3, inset -5px -5px 10px #FFFFFF;
--media:linear-gradient(145deg,#EEF2F7,#D5DBE4);
--code-bg:#2F3A4C;
--code-fg:#E4E9F0;
--btn-case:none;
--btn-track:0;
--btn-weight:800;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.6px;
--fs-body:17px;
--fs-4:21.2px;
--fs-3:26.6px;
--fs-2:33.2px;
--fs-1:41.5px;
--fs-d:clamp(42px, 9vw, 81px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{background:var(--bg);color:var(--accent);box-shadow:var(--shadow-sm);border-radius:999px}
.btn:hover{transform:none;box-shadow:7px 7px 14px #C2C9D3,-7px -7px 14px #fff}
.btn:active,.btn[aria-pressed="true"]{transform:none;box-shadow:inset 5px 5px 10px #C2C9D3,inset -5px -5px 10px #fff}
.btn-2{color:var(--fg)}
.btn.btn-solid{background:var(--accent);color:#fff;box-shadow:5px 5px 10px #C2C9D3,-5px -5px 10px #fff}
.btn-ghost{box-shadow:none;color:var(--muted)}
.card-media{box-shadow:var(--field-shadow)}
.badge{box-shadow:var(--shadow-sm);border:0;color:var(--accent)}
.check,.radio{box-shadow:var(--field-shadow)}
.check:checked,.radio:checked{box-shadow:inset 3px 3px 6px rgba(0,0,0,.25)}
.switch{box-shadow:var(--field-shadow)}
.switch::before{background:var(--bg);box-shadow:3px 3px 6px #C2C9D3,-3px -3px 6px #fff}
.switch:checked::before{background:#fff}
.alert{box-shadow:var(--shadow-sm);border:0;border-left:0}
.alert b{padding-right:.3em}
.progress{box-shadow:var(--field-shadow)}
.progress i{border-radius:999px}
.tabs{border:0;padding:6px;border-radius:999px;box-shadow:var(--field-shadow);display:inline-flex}
.tab{border:0;border-radius:999px;margin:0}
.tab[aria-selected="true"]{box-shadow:var(--shadow-sm);color:var(--accent)}
.pager a{box-shadow:var(--shadow-sm);border-radius:50%}
.pager a[aria-current]{box-shadow:var(--field-shadow);background:var(--bg);color:var(--accent)}
.table-wrap{box-shadow:var(--shadow)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#2B2F36;
--surface:#2B2F36;
--surface2:#2B2F36;
--accent2:#2B2F36;
--fg:#E4E8EE;
--muted:#A7AFBC;
--accent:#8CA6FF;
--accent2-fg:#E4E8EE;
--shadow:9px 9px 18px #1F2227, -9px -9px 18px #373C45;
--shadow-sm:5px 5px 10px #1F2227, -5px -5px 10px #373C45;
--field-bg:#2B2F36;
--field-shadow:inset 5px 5px 10px #1F2227, inset -5px -5px 10px #373C45;
--code-bg:#1A1D22;
}
html.alt .btn:hover{box-shadow:7px 7px 14px #1F2227,-7px -7px 14px #373C45}html.alt .btn:active{box-shadow:inset 5px 5px 10px #1F2227,inset -5px -5px 10px #373C45}html.alt .switch::before{box-shadow:3px 3px 6px #1F2227,-3px -3px 6px #373C45}html.alt .btn.btn-solid{color:#1A1D22;box-shadow:5px 5px 10px #1F2227,-5px -5px 10px #373C45}html.alt .hero h1{text-shadow:4px 4px 8px #1F2227,-4px -4px 8px #373C45}html.alt .docnav{box-shadow:0 6px 12px #1F2227}html.alt .press{animation-name:pralt}@keyframes pralt{0%,40%,100%{box-shadow:9px 9px 18px #1F2227,-9px -9px 18px #373C45}55%,85%{box-shadow:inset 9px 9px 18px #1F2227,inset -9px -9px 18px #373C45}}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a smart home control app in an authentic Neumorphism style.
Palette: Surface #E4E9F0, Shade #C2C9D3, Highlight #FFFFFF, Indigo #3F5FCF, Ink #2F3A4C, Slate #5A6578.
Typography: Varela Round for headings, Mulish 400 and 800 for body and buttons.
Layout: Hero with a large rotary knob and three soft keys on the right, headline left. Controls grouped in generous panels on the same gray surface.
Signature details: Background and controls share #E4E9F0. Raised: 9px 9px 18px #C2C9D3 and -9px -9px 18px #FFFFFF. Pressed: the same shadows inset. One indigo accent.
Components: Pill buttons that sink when pressed, inset text fields, segmented control in an inset track, circular pagination, toggles with a raised thumb.
Motion: Shadow direction flips from outside to inside on press, 150 to 250ms.
Avoid: borders, white or black backgrounds, low-contrast text, shadow-only buttons without color or label.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Shadow-only controls fail contrast. Add an accent color, icon or label to every action.
Raised and pressed can look similar. Pair the inset state with a color change.
Neumorphism needs a mid-tone surface. Pure white or black leaves nowhere for highlights or shadows to go.
Large neumorphic interfaces feel foggy. Use it for controls, not for everything.