Hub

Claymorphism

A friendly UI with a soft, squishy three-dimensional feel like marshmallows or modeling clay. By combining dual shadows, elements appear to float while maintaining a gentle, inflated volume from within.

Clay Palette

Coral
Sky
Honey
Mint
Lilac

Button Specimens

Clay Character

Clay Tablets

🧴

Soft & Rounded

Every surface uses generous border-radius (20-40px) to eliminate sharp edges entirely.

💧

Dual Shadows

Outset shadows for depth plus inset shadows for inflated volume — the core clay recipe.

✨

Inner Highlights

Subtle top-light gradients and white inner shadows create the illusion of molded clay catching light.

Clay Toggles

Squish
Bounce
Glow

Color Mixing

+
=
+
=

Clay Progress

Softness — 75%
Roundness — 50%
Squishiness — 90%

Material Properties

CSS Clay Recipe

border-radius 20px ~ 40px (rounded, never sharp)
outset shadow 10px 10px 20px rgba(0,0,0,0.05),
-10px -10px 20px #fff
inset shadow inset 5px 5px 10px rgba(255,255,255,1),
inset -5px -5px 10px rgba(0,0,0,0.05)
inner gradient linear-gradient(160deg, lighter 0%, base 100%)
+ inset highlights for 3D illusion
hover effect transform: scale(0.95)
Squish down on interaction

AI Request Prompt

Design a landing page in Claymorphism style — soft, squishy surfaces with marshmallow-like inflated volume.

COLOR TOKENS:
--bg: #e8eaed
--clay-bg: #ffffff
--card-bg: #fdfdfd
--text: #414a52
--accent-coral: #ff8b7e
--accent-sky: #a2c2ff
--accent-yellow: #ffd166
No other colors.

TYPOGRAPHY:
Font family: 'Nunito', sans-serif. Weights: 700, 900.
h1: clamp(2.5rem, 6vw, 4rem), letter-spacing: -0.03em, text-shadow: 2px 2px 4px rgba(0,0,0,0.1).
Body: 1.2rem, line-height: 1.6, opacity: 0.8.
Card text: 0.95rem, opacity: 0.8.

UI:
Hero panel: background #ffffff, border-radius: 40px, text-align: center.
Cards: background #fdfdfd, border-radius: 30px, padding: 30px.
Icon blocks: 70x70px squares, border-radius: 20px, accent-color background.
Buttons: border-radius: 25px, padding: 12px 30px, accent-color background, white text.

LAYOUT:
Page container: width: min(1050px, 92vw), margin: 0 auto, padding: 28px 0 76px.
Card grid: display: grid, grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), gap: 30px.

SHADOWS (critical — every surface must use outset + inset simultaneously):
Hero outset: 15px 15px 30px rgba(0,0,0,0.08), -15px -15px 30px rgba(255,255,255,1).
Hero inset: inset 10px 10px 15px rgba(255,255,255,1), inset -10px -10px 15px rgba(0,0,0,0.05).
Card outset: 10px 10px 20px rgba(0,0,0,0.05), -10px -10px 20px #fff.
Card inset: inset 5px 5px 10px rgba(255,255,255,1), inset -5px -5px 10px rgba(0,0,0,0.02).
Icon inset: inset 5px 5px 10px rgba(255,255,255,0.5), inset -5px -5px 10px rgba(0,0,0,0.1).
Button inset: inset 4px 4px 8px rgba(255,255,255,0.6), inset -4px -4px 8px rgba(0,0,0,0.1).

MOTION:
Card hover: transform: translateY(-5px), transition: 0.3s ease.
No other animations.

RESPONSIVE:
≤768px: card grid collapses to 1 column, hero padding shrinks via clamp(30px, 5vw, 60px).
≥1050px: page width caps at 1050px, 2-column card grid.

FORBIDDEN:
- Sharp right-angle corners (minimum border-radius: 15px on any surface)
- Flat single shadows (every element must combine outset + inset)
- Dark mode or dark backgrounds
- Gradients on surfaces
- Border lines (depth comes from shadows only)

OUTPUT:
1) CSS custom properties for all shadow pairs, radii, and color tokens
2) Hero section (centered) + card grid (2 columns) + CTA button
3) Single-file HTML/CSS with responsive support