Neumorphism is a free soft UI kit of eight sets, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 with its own buttons, form controls, cards, navs, pagination, alerts, toasts and dropdowns restyled through CSS variables, and Tailwind CSS 4 with the shadows exposed as theme utilities. The sets cover buttons and switches, form controls with a login card, cards, navigation, overlays and feedback, smart-home widgets, a dark variant and a full smart-home dashboard. They all read the same token block, so one change to the background, the shadow depth or the accent restyles the whole kit.
Want your own soft shadows? The box shadow generator builds neumorphic light-and-dark shadow pairs and gives you the code in CSS, Tailwind 4 and Bootstrap 5.
Neumorphism has a reputation for failing accessibility, and most examples earn it: controls are cut from the background with two soft shadows, so their edges are faint, focus is invisible, and a pressed button looks almost the same as a released one. This kit keeps the look and fixes those three problems. Every control has a 1px edge that reaches 3:1 against the surface and text reaches 4.5:1. Keyboard focus is a 3px accent ring drawn outside the shadow. On, selected and current states change shape and also add an accent colour, a dot, a bar or a word such as On, so they read without the shadow. When a user asks for more contrast, the shadows are dropped and every control is drawn with a solid outline.
Free download Browse live demos All snippets
The sets
1. Neumorphic Buttons & Switches
Raised and accent buttons, round and square icon buttons, quick toggle tiles, switch rows with an On or Off word, and a segmented control for fan speed.
Use them as the base controls of a soft interface. Toggles are hidden checkboxes behind a face that presses in and turns accent, and the Bootstrap version uses .btn, .btn-check and .form-switch.
Live Demo CSS, Bootstrap & Tailwind code
2. Neumorphic Forms & Login Card
Inset text fields with an icon, helper text and an error state, a select, checkboxes, radios, a brightness slider and a complete login card.
Field edges reach 3:1, so the inputs are visible on the soft background. Errors are tied to their field with aria-describedby, and Bootstrap uses .form-control, .form-select, .form-check-input and .form-range.
Live Demo CSS, Bootstrap & Tailwind code
3. Neumorphic Cards
Stat tiles for energy, temperature and solar output, a content card with an inline illustration, a profile card and a free and paid pricing pair.
Use them for dashboards, articles and upgrade pages. Changes are written in words next to their arrows, and the recommended plan has a visible Most popular badge.
Live Demo CSS, Bootstrap & Tailwind code
4. Neumorphic Navigation
A navbar, a grouped sidebar with an unread count, tabs that switch between rooms, and round pagination.
The current item is pressed in, accent and marked with a bar or dot, with aria-current set. The tabs follow the ARIA pattern with arrow keys, and Bootstrap uses its own tab plugin.
Live Demo CSS, Bootstrap & Tailwind code
5. Neumorphic Overlays & Alerts
Information, success, warning and error alerts, toasts with Undo and close buttons, tooltips, a dropdown of room actions and a confirmation modal.
The modal is the native dialog element, so focus is trapped and Escape closes it. Alerts name their type in an icon, a title and hidden text, not only in colour.
Live Demo CSS, Bootstrap & Tailwind code
6. Neumorphic Smart-Home Widgets
A music player, a thermostat dial with minus and plus buttons, light switch tiles, three progress rings and an analogue clock.
The dial and rings are conic gradients with real progressbar or group semantics, and the seek bar is a range input that reads 1:42 of 3:58. A short script runs the dial, seek times and clock.
Live Demo CSS, Bootstrap & Tailwind code
7. Dark Neumorphism UI
Buttons, toggle tiles, switches, a search field, a segmented control, stat tiles, a mini player and progress rings on a dark surface.
One attribute, data-neu="dark", swaps every token, and the dark values are checked for 4.5:1 text and 3:1 control edges. Bootstrap pairs it with data-bs-theme="dark".
Live Demo CSS, Bootstrap & Tailwind code
8. Neumorphic Smart-Home Dashboard
A full smart-home dashboard with a sidebar, stat tiles, a climate panel, light switches, a scene picker, a mini player and a warning.
The dark mode switch is a checkbox and :has() re-themes the whole page with no JavaScript. Under 900 pixels the sidebar moves above the content and the panels stack.
Live Demo CSS, Bootstrap & Tailwind code
Frequently asked questions
Is this neumorphism UI kit free for commercial projects?
Yes. Every set is free for personal and commercial projects, including client work and products you sell. Attribution is optional but always welcome. The licence is at uicookies.com/license/.
Does the kit need JavaScript?
Most of it does not. Buttons, toggles, switches, the segmented control, cards, the sidebar, pagination, tooltips and the dashboard’s dark mode switch are HTML and CSS. Short vanilla scripts open the dialog, close toasts and the dropdown, run the plain and Tailwind tabs, and drive the thermostat, seek bar, range value and clock. The Bootstrap versions use Bootstrap’s bundle for tabs, toasts and the dropdown.
Is neumorphism accessible?
It usually is not, because the soft shadows leave control edges, focus and pressed states too faint. This kit adds a 1px edge at 3:1 to every control, keeps text at 4.5:1, draws a 3px accent focus ring and shows every on or selected state by shape plus an accent colour, a mark or a word. Under prefers-contrast: more the shadows are removed and controls are outlined, motion stops under prefers-reduced-motion, and every set passes an automated axe-core WCAG 2.1 AA check.
Which frameworks are included?
Every set has three files that look the same: plain HTML and CSS, Bootstrap 5.3.8 and Tailwind CSS 4. Bootstrap’s own components are restyled by mapping its –bs-* variables to the kit tokens, with a small style block for the rest. The Tailwind files map the tokens into an @theme inline block, which gives utilities such as bg-neu-bg, shadow-neu, shadow-neu-in and rounded-neu.
How do I make a neumorphic shadow in CSS?
Give the element the same background colour as the page and two box shadows: a dark one offset down and right, and a light one offset up and left, such as 6px 6px 14px #a3b1c6 and -6px -6px 14px #ffffff on #e0e5ec. Add the inset keyword to both for a pressed shape. This kit builds those shadows from the –neu-distance, –neu-blur, –neu-dark and –neu-light tokens, so changing one value changes every component.
