Claymorphism Design Generator
Advanced 3D Claymorphism studio: pillowy curvature, dual inner bevels, colored ambient floating shadows, matte/glossy/frosted finishes, with CSS and Tailwind classes.
Claymorphic Card
Inflated 3D pillowy surface with double inset specular bevels and floating shadow.
border-radius: 36px; background: #6366f1; box-shadow: inset -12px -12px 20px 0px rgba(0, 0, 0, 0.25), inset 12px 12px 20px 0px rgba(255, 255, 255, 0.5), 0px 24px 48px 0px rgba(99, 102, 241, 0.35);
rounded-[36px] bg-[#6366f1] shadow-[inset_-12px_-12px_20px_0px_rgba(0,0,0,0.25),inset_12px_12px_20px_0px_rgba(255,255,255,0.5),0px_24px_48px_0px_rgba(99,102,241,0.35)]
className<div className="...">Export & saved snippets
.element {
border-radius: 36px;
background: #6366f1;
box-shadow: inset -12px -12px 20px 0px rgba(0, 0, 0, 0.25),
inset 12px 12px 20px 0px rgba(255, 255, 255, 0.5),
0px 24px 48px 0px rgba(99, 102, 241, 0.35);
}How to Use Claymorphism Design Generator
Select your base clay color from curated 3D pastel/vibrant palettes or pick a custom hue.
Configure pillowy corner radius, inner highlight depths, and floating drop shadow elevation.
Switch finishes between Matte, Glossy specular sheen, or Frosted Glass-Clay.
Preview interactive 3D clay cards, bouncy push buttons, tags, or search inputs on light, dark, or mesh canvases.
Copy standard CSS rules or arbitrary Tailwind CSS classes from their dedicated boxes.
Frequently Asked Questions
What is Claymorphism?
Claymorphism is an evolution of soft 3D UI featuring inflated, pillowy objects with rounded corners, dual inset specular highlights/creases, and a colored ambient floating drop shadow.
How do I use the Tailwind CSS output?
Copy the provided arbitrary Tailwind classes (such as shadow-[inset_...], rounded-[...], bg-[...]) directly into your JSX or HTML className attribute.
What is the difference between Matte and Glossy clay?
Matte simulates soft uniform molded plastic or clay, while Glossy adds an optical specular gradient highlight to the top surface.
Related Developer Tools
Explore more free client-side developer utilities in this category