Claymorphism Generator

Generate soft, 3D clay-style UI effects with customizable shadows and colors. Perfect for modern, playful designs!

Clay Effect ✨

Color Presets

Background Color

Element Color

Border Radius: 30px

Shadow Distance: 20px

Shadow Blur: 60px

Add Inner Shadow

Generated CSS

background: #f0e6d3;
border-radius: 30px;
box-shadow: 20px 20px 60px 0px #e3c692,
             -20px -20px 60px 0px #ffffff,
             inset 6.666666666666667px 6.666666666666667px 30px 0px #e3c69240,
             inset -6.666666666666667px -6.666666666666667px 30px 0px #ffffff40;

Features

3D clay effect
Inner shadow option
Color presets
Adjustable shadows
Live preview

How to Use

1
Choose background color
2
Adjust shadow settings
3
Toggle inner shadow
4
Copy the CSS code

Frequently Asked Questions

What is Claymorphism?

A design trend featuring soft, 3D, clay-like UI elements with pastel colors and multiple shadows.

Where can I use this?

Great for cards, buttons, and containers in modern web and app designs.

Back to Design Tools