Claymorphism Card Generator
Create soft, tactile claymorphism UI cards with adjustable inner/outer shadows, border radius, padding, and background colors. Claymorphism uses dual shadows (light + dark) to create a pressed-clay depth effect. Copy production-ready CSS for your projects.
Controls
Live Preview
Adjust controls to see real-time updates. Hover the card for interactive shadow response.
A slider panel that builds the clay look: a dark shadow to the lower right and a light one to the upper left over a solid background, with a hover pair at a larger offset. The card previews live in the page as you drag, and Copy CSS puts the card rule and its hover state on your clipboard. Background color, radius, padding, shadow depth and shadow intensity are the only inputs, and they stay in the page.
How to use it
- Set border radius, padding and a background hex with the color swatch or the text field.
- Drag shadow depth and intensity until the raised-clay effect reads the way you want; the preview repaints as you drag.
- Hover the card in the preview to see the second shadow pair, then press Copy CSS for the card and hover rules.
Worked example
defaults - radius 24px, padding 32px, background #e0e5ec, depth 8px, intensity 30%becomes.claymorphism-card {
background: #e0e5ec;
border-radius: 24px;
padding: 32px;
box-shadow:
8px 8px 16px rgba(0, 0, 0, 0.045),
-8px -8px 16px rgba(255, 255, 255, 0.21);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 400px;
}
.claymorphism-card:hover {
box-shadow:
12px 12px 24px rgba(0, 0, 0, 0.045),
-12px -12px 24px rgba(255, 255, 255, 0.21);
}Intensity multiplies both alphas: 0.15 x 0.3 gives rgba(0,0,0,0.045) and 0.7 x 0.3 gives rgba(255,255,255,0.21).
When to use it
- You want a soft, tactile card for a dashboard or a landing page panel and need the two-shadow pair generated correctly.
- You are tuning an existing neumorphic-style design and want to slide depth and intensity until the relief looks right.
- You need the hover state of a clay card, which is easy to get wrong by hand because both shadow offsets change together.
What it does not do
- The copied CSS is not the same as the preview: it contains only the card and hover rules, so the heading, paragraph and button styling (and the transition) that the live preview applies are missing from the clipboard text.
- Intensity is a multiplier, not an alpha: at 30% the shadows are rgba(0,0,0,0.045) and rgba(255,255,255,0.21), and the values are printed as JavaScript floats rather than rounded.
- The background text field only accepts a complete six-digit hex - typing character by character appears to do nothing until the value is valid.
- Both shadows sit outside the box, so the pressed-in clay variant is not available, and the effect collapses on a white page where the light shadow has nothing to contrast with.