Home / Soft and Tactile UI / Claymorphism
Claymorphism CSS Template, Free with Live Demo
Free claymorphism HTML and CSS template with puffy, clay-like 3D cards and buttons. Built for a kids learning app. Live demo, CSS code and download. The example is Pebble Math, a kids learning app.
What is claymorphism?
Claymorphism makes cards and buttons look like soft modeling clay. They are very rounded, brightly colored and puffy, as if you could squeeze them. It feels friendly and a little playful.
The look comes from mixing two inset shadows, a dark one at the bottom right and a light one at the top left, with a normal drop shadow underneath. The inset shadows give the surface its round, inflated shape.
Good for
- Apps and websites for children
- Games and quiz tools
- Friendly SaaS onboarding screens
- Brands that want to feel warm and approachable
What you get in this template
- Puffy clay cards in five candy colors
- A working math question with instant feedback
- Big chunky buttons that lift and squish
- Four learning world cards in a grid
- Rounded Baloo 2 font that suits young readers
The key CSS
This is the part that makes the claymorphism look work. Copy it into your own project.
.clay {
border-radius: 34px;
box-shadow:
inset -8px -8px 16px rgba(0, 0, 0, 0.12),
inset 8px 8px 16px rgba(255, 255, 255, 0.6),
10px 14px 24px rgba(90, 60, 120, 0.18);
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is claymorphism in web design?
It is a style where elements look like soft 3D clay: very round corners, bright colors, and inner shadows that make them look inflated. It became popular in apps for kids, games and friendly startups.
How is claymorphism different from neumorphism?
Neumorphism uses the same color as the background, so elements look carved from it. Claymorphism uses bright colors that stand out and looks like separate soft objects sitting on the page.
Can I use claymorphism for a business website?
Yes, if your brand is friendly and casual. For banking or legal sites it may feel too playful, so use it only on small parts like icons or buttons.
More Soft and Tactile UI designs
001. Glassmorphism
Harbor, a savings app landing page
002. Liquid Glass
Tidewell, a weather app screen
003. Neumorphism
Hearth, a smart home control panel
005. Frosted Aurora
Stillwater, a sleep and calm app
006. Soft UI
Loom, a weekly planner dashboard
007. Skeuomorphism
Field Journal, a notes app
008. Tactile Buttons
Clack, a keyboard shop with a working calculator
009. Jelly UI
Wobble, a gelato shop