Claymorphism is a free clay 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, modal and dropdowns restyled through CSS variables, and Tailwind CSS 4 with the clay shadows exposed as theme utilities. The sets cover buttons and toggles, form controls with a login card, cards, navigation, overlays and feedback, media widgets, a dark variant and a full kids learning app with a habit tracker. They all read the same token block, so one change to a pastel fill, the float height or the corner radius restyles the whole kit.
Tune the puffy shadows with the free box-shadow generator and build a pastel set in the colour palette generator. More style kits: glassmorphism, neumorphism, neobrutalism, retro.
Clay UI is easy to get wrong. A good clay object is a colourful, puffy shape that floats: a large soft drop shadow underneath, an inset highlight on the top left and an inset shade on the bottom right, which is what separates it from neumorphism, where controls are pressed out of a single surface colour. The common mistakes are pale text on pale pastel, buttons whose only edge is a shadow, and pressed states that look the same as resting ones. This kit sets all text in a deep ink that reaches 11:1 on every fill, gives every control a 1.5px edge that reaches 3:1 against the page, draws a 3px accent focus ring outside the shadow, and shows a pressed or on state by flattening the shadow and also by a tick, a filled icon or the word On.
Free download Browse live demos All snippets
The sets
1. Claymorphism Buttons & Toggles
Pastel pill buttons in five fills and an accent, round and squircle icon buttons, toggle tiles, a favourite toggle, switch rows and a segmented control.
Buttons lift on hover and squash flat while pressed. Toggles are hidden checkboxes behind a face that flattens and shows a tick and the word On, and the Bootstrap version uses .btn, .btn-check and .form-switch.
Live Demo CSS, Bootstrap & Tailwind code
2. Claymorphism Forms & Login Card
Inset text fields with an icon, helper text and an error state, a select, a textarea, checkboxes, radios, a goal slider and a complete login card.
Field edges reach 4:1, so inputs stay visible on the light page. 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. Claymorphism Cards
Coloured stat slabs, a lesson card with an illustration drawn from CSS shapes, a profile card with an initials avatar and a free and paid pricing pair.
Use them for dashboards, learning apps and upgrade pages. Fills are set per object with @property, so a lilac card does not turn the buttons inside it lilac.
Live Demo CSS, Bootstrap & Tailwind code
4. Claymorphism Navigation
A floating pill navbar, a grouped sidebar with icon blobs and counts, tabs for three subjects and round pebble pagination.
The current item sits on a tint pebble with an accent edge and a dot or bar, 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. Claymorphism Overlays & Feedback
Tip, success, warning and error alerts, toasts with close buttons, tooltips, a dropdown of lesson actions and a confirmation dialog.
The dialog is the native dialog element, so focus is trapped and Escape closes it. Alerts name their type in a title, an icon and hidden text, not only in colour.
Live Demo CSS, Bootstrap & Tailwind code
6. Claymorphism Media & Widgets
A music player, a weather card with a four-day forecast, a mini calendar for October 2026 and progress bars with a weekly goal ring.
The calendar is a real table with aria-current on today, the seek bar is a range input that reads 1:42 of 3:58, and the ring is a conic gradient with progressbar semantics.
Live Demo CSS, Bootstrap & Tailwind code
7. Dark Claymorphism UI
Buttons, toggle tiles, switches, a search field, stat cards, a mini player, an alert and a progress bar in deep jewel tones on a dark page.
One attribute, data-clay="dark", swaps every token, and the dark values are checked for 7:1 text and 4:1 control edges. Bootstrap pairs it with data-bs-theme="dark".
Live Demo CSS, Bootstrap & Tailwind code
8. Claymorphism Kids Learning App
A kids learning app screen with a greeting, a streak card, a stars card, three lesson cards, a seven-day habit tracker and a sticker shelf.
The Night mode switch is a checkbox and :has() re-themes the whole app with no JavaScript. On phones the cards stack and the habit table scrolls inside its card.
Live Demo CSS, Bootstrap & Tailwind code
Frequently asked questions
Is this claymorphism 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 learning app’s Night mode switch are HTML and CSS. Short vanilla scripts open the dialog, close toasts and the dropdown, run the plain and Tailwind tabs, paint the sliders and drive the play button. The Bootstrap versions use Bootstrap’s bundle for tabs, the modal, toasts, tooltips and the dropdown.
Is claymorphism accessible?
It can be, if the text and edges are handled. This kit sets all text in a deep ink that reaches 11:1 on every pastel fill, gives every control a 1.5px edge at 3:1 or more so the shadow is not its only boundary, draws a 3px accent focus ring and shows pressed and on states with a tick, a filled icon or a word as well as a flatter shadow. Motion stops under prefers-reduced-motion, edges turn full ink under prefers-contrast: more, 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-clay-peach, shadow-clay, shadow-clay-press and rounded-clay.
How do I make a claymorphism effect in CSS?
Give the element a pastel background, a large border radius and three box shadows: a soft outer drop shadow below it, such as 0 14px 31px -4px in a tinted dark, an inset white highlight offset down and right, and an inset dark shade offset up and left. For a pressed state, shrink the outer shadow and swap the inset highlight and shade. This kit builds those shadows from the –clay-lift, –clay-drop, –clay-hi and –clay-lo tokens, so changing one value changes every component.
