Claymorphism – 8 Free CSS, Bootstrap & Tailwind Sets
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.
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.
