MobiflixPro
Trending 3D UI•100% Client-Side Privacy

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.

Clay Color Palette#6366f1
Surface Finish
Canvas Backdrop
Colored Ambient Drop Shadow
Pillowy Corner Radius36px
Inner Bevel Depth12px
Bevel Blur20px
Floating Elevation Y24px
Elevation Blur48px
Top-Left Highlight Specular Sheen50%
✨
3D Inflated UI

Claymorphic Card

Inflated 3D pillowy surface with double inset specular bevels and floating shadow.

80% InflatedLevel 3D
CSS3Standard CSS Properties
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);
Multi-layer inset bevels + floating drop shadow.claymorphic-card
Tailwind v3/v4Tailwind CSS Arbitrary Classes
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)]
Directly paste into your JSX/HTML className<div className="...">

How to Use Claymorphism Design Generator

01

Select your base clay color from curated 3D pastel/vibrant palettes or pick a custom hue.

02

Configure pillowy corner radius, inner highlight depths, and floating drop shadow elevation.

03

Switch finishes between Matte, Glossy specular sheen, or Frosted Glass-Clay.

04

Preview interactive 3D clay cards, bouncy push buttons, tags, or search inputs on light, dark, or mesh canvases.

05

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

View All Tools
Colors

Color Picker

Interactive color picker with HEX, RGB, HSL, and CMYK color code converters.

Open tool
Colors

HEX to RGB Converter

Convert 3-digit and 6-digit HEX color codes into standard rgb() and rgba() formats.

Open tool
Colors

RGB to HEX Converter

Convert red, green, and blue values (0-255) into standard CSS hexadecimal codes.

Open tool
CSS Visualizers

Gradient Generator

Generate beautiful CSS linear and radial gradients with custom color stops and angle controls.

Open tool
CSS Visualizers

Glassmorphism Design Generator

Advanced Frosted Glassmorphism Studio: optical backdrop-blur, saturation boost, multi-tinted frosted glass, specular border reflections, floating background scenes, with standard CSS and Tailwind classes.

Open tool
CSS Visualizers

Neumorphism Design Generator

Advanced Soft UI generator: dynamic 4-way light angles, concave/convex gradients, pressed states, with CSS & Tailwind classes.

Open tool