2 Pure CSS5 with JSPublished 2026-10-05Free · no sign-up
Seven soft UI components: raised buttons that press in, a switch with an inset track, a restyled range slider, a profile card with an inset avatar, a sunken search field, a rotary knob driven by a real range input and a neumorphic panel on a dark base.
Soft UI buttons that look pushed out of the background with a light shadow on the top left and a dark one on the bottom right, and pushed in when pressed with inset shadows. A darker text colour and a focus ring add the contrast the style lacks on its own.
A neumorphic switch: an inset track and a raised knob that slides across, with an accent dot that lights when on. The accent colour gives the on state a clear signal, since soft shadows alone are hard to read.
var b = document.querySelector('.nm2 button');
b.onclick = function () { b.setAttribute('aria-checked', b.getAttribute('aria-checked') !== 'true'); };
03. Neumorphic Range Slider
NeumorphismRange
A native range input restyled with an inset groove and a raised round thumb. Styling the real input keeps keyboard, touch and screen reader support, and the visible value next to it adds the clarity soft UI needs.
var r = document.getElementById('nm3r'), o = document.querySelector('.nm3 output');
r.oninput = function () { o.textContent = r.value; };
04. Soft UI Profile Card
NeumorphismCard
A raised card with an inset avatar well and soft buttons, the full neumorphic look. Text uses a darker slate rather than the mid grey common in this style, so the name and role pass contrast on the pale background.
A search field pressed into the surface with inset shadows, with a visible label and an icon. Because inset fields can look disabled, the focus state adds an accent ring and the placeholder is dark enough to read.
A raised round knob with a pointer that turns as the value changes, the kind used for audio and smart home controls. A visually hidden range input does the work, so arrow keys and screen readers operate it, while the knob is only its picture.
var r = document.getElementById('nm6r'), k = document.querySelector('.nm6 .knob'), o = document.querySelector('.nm6 output');
function set() { k.style.setProperty('--a', ((r.value - 22) * 22) + 'deg'); o.textContent = r.value; }
r.oninput = set; set();
07. Dark Neumorphic Panel
NeumorphismDark
Neumorphism on a dark base: the light shadow becomes a slightly lighter shade of the background and the dark shadow nearly black. Dark soft UI has even less contrast, so the active control also gets a coloured icon and label.
Neumorphism uses a light shadow toward the light source and a dark shadow away from it, on an element the same colour as its background. Inset versions of the same shadows make an element look pressed in.
Contrast is the weak point
Soft UI often has pale grey text and controls that barely stand out. Use darker text, an accent colour for active states and strong focus rings so it stays usable.
Style real controls
Restyle native inputs and buttons rather than building lookalikes. The range slider and knob here are real range inputs underneath, so keyboards and screen readers work.
Use it sparingly
Neumorphism suits a few tactile controls, such as a music player or smart home panel. A whole site in soft UI quickly becomes hard to scan.
Frequently asked questions
Is neumorphism accessible?
Only with extra contrast and clear states, as these demos add.
Does it work in dark mode?
Yes, with a lighter shade for the highlight and near black for the shadow, as the last demo shows.
Which colours work best?
Light, slightly tinted greys; pure white leaves no room for the highlight shadow.