Claymorphism

Stylegeneral

Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px). Best for Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games.

Soft 3D chunky playful toy-like bubbly thick borders (3-4px)double shadows rounded (16-24px)

#FDBCB4

#ADD8E6

#98FF98

#E6E6FA

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Claymorphism

Keywords: Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)
Primary colours: Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG
Secondary colours: Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle
Effects & animation: Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions
Best for: Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games
Do not use for: Formal corporate, professional services, data-critical, serious/medical, legal apps, finance

## Prompt keywords
Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth animations. Perfect for children's apps and creative tools.

## CSS / technical
border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56)

## Implementation checklist
☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions

## Design system variables
--border-radius: 20px, --border-width: 3-4px, --shadow-inner: inset -2px -2px 8px, --shadow-outer: 4px 4px 8px, --color-palette: pastels, --animation: bounce

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source