Claymorphism demo form
Claymorphism — coined in 2021 by Michał Malewicz, as a play on clay and skeuomorphism — makes interface elements look like soft, inflated pieces of clay: big rounded corners, pastel colours, a light inner shadow on one side and a darker inner shadow on the other, plus a soft outer shadow so everything floats off the page.
This form is a working visual demo of that style. You can type in it, pick a topic and press the button — but it is visual only: it sends nothing and saves nothing.
What makes it clay?
- Oversized rounding — corners at 18–32px, so nothing has a sharp edge.
- Double inner shadow — light from one side, dark from the other, which is what sells the soft, moulded look.
- A soft drop shadow underneath, lifting each element off the background like a separate piece of clay.
- Pastel, solid colours — strong colour keeps it readable, unlike neumorphism, which blends into its background and often fails on contrast.
The starter recipe
The same three-shadow recipe drives the card, the fields and the button in the form:
.clay-card {
background: #2e2750;
border-radius: 32px;
box-shadow:
12px 12px 28px rgba(0, 0, 0, .45),
inset -8px -8px 16px rgba(0, 0, 0, .28),
inset 8px 8px 16px rgba(255, 255, 255, .06);
}
.clay-input {
background: #241d3a;
border-radius: 18px;
box-shadow:
inset 4px 4px 9px rgba(0, 0, 0, .4),
inset -4px -4px 9px rgba(255, 255, 255, .05);
}Where it works — and where it doesn't
Clay suits playful consumer apps, education, creative tools and kids' products — anywhere a friendly, toy-like feel is the point. It is a weaker fit for serious enterprise, legal or finance interfaces, where that same playfulness can cost credibility.
Try the pressed-in fields, the topic pills and the chunky button: pressing the button swaps its raised shadows for inset ones, so it feels like it sinks into the clay.
Demo only — this form has no inbox behind it and sends or saves nothing.