Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← StylesCompare with another style

Claymorphism

Soft, inflated clay: puffy forms, candy color, two shadows doing the work.

Wallet dashboard

Inflated surfaces separate balance, progress, and actions while keeping one clear financial hierarchy.

Audio controls

The clay treatment stays on the album object and transport controls instead of coating every surface.

Habit tracker

A repeated tile system turns the candy palette into a usable weekly rhythm rather than a color swatch.

A grid of soft, rounded 3D toy-face avatars in bright candy colors from the Toy Faces library.
Toy FacesAmrit Pal Singh · 2021
A soft, inflated 3D elephant illustration with paired inner and outer shadows on a pale ground.
Claymorphism in User InterfacesMichal Malewicz / Hype4 · 2021

How it works

Color

Pastel SurfaceClay YellowCandy PinkSoft BlueMintInner Light

Typography

Nunito
Quicksand
Baloo 2
Characteristics

Inflated 3D forms

Elements look like a flat shape that was pumped full of air: very round, soft, and three-dimensional, the puffy quality that gives the style its name.

The two-inner-shadow recipe

The core craft. One outer drop shadow floats the shape, and two inner shadows inflate it: a lighter one at the top-left and a darker one at the bottom-right. Remove them and the clay deflates back to a flat card.

Sideways outer shadow

The single outer shadow is often pushed along the X-axis rather than straight down, breaking the usual UI shadow convention and selling the floating-clay feel.

Large corner radius

Corners are rounded well past normal UI values, often 24px and up on a card, so nothing reads as sharp or hard-edged.

Candy-pastel palette

Light pastels and bright candy colors, and they are not optional: the soft drop shadow tends to disappear on dark backgrounds, so the style needs bright fills to work.

Friendly and illustration-heavy

The tone is playful and tactile, and it pairs naturally with soft-3D figurative illustration and icons, which is where most of its real-world use lives.

Use it

Figma
The clay element
  1. Draw the shape and set a large corner radius, around 24 to 48.
  2. Give it a bright pastel fill.
  3. Add a Drop shadow: large, soft, low opacity, offset slightly sideways.
  4. Add two Inner shadows: a white one at the top-left and a dark one at the bottom-right.

Prototype the exact values in a claymorphism CSS generator, then translate them into Figma effects.

Colored shadow
  1. Sample the fill color and shift it darker for the outer shadow.
  2. Use a tinted dark for the bottom-right inner shadow instead of pure black.
  3. Keep the top-left inner highlight white or near-white.

Color-tinted shadows read as real material; pure gray reads as a UI effect.

Drop in 3D illustration
  1. Build or render a soft 3D shape in Spline or Blender.
  2. Export it as a transparent PNG.
  3. Place it on the flat layout next to your clay UI elements.

The widely adopted version of this style is the illustration, not the CSS; Spline runs in the browser if Blender is too much.

Reusable clay component
  1. Turn a finished clay element into a Component.
  2. Store the radius and shadow values as Variables so the set tunes together.
  3. Build a few pastel color variants from the same base.

Exposing the shadow values as variables keeps every clay element consistent across the file.

Starting points
  1. Draw the shape and give it a large corner radius, 24px or more.
  2. Fill it with a bright pastel; avoid dark grounds, where the shadow vanishes.
  3. Add one outer drop shadow, soft and offset sideways, to float it.
Research notes & sources

2021 to present

Soft-UI design and the 3D-render wave on the web

Product UI and 3D illustration

Clay UI, Soft 3D, Neumorphism 2.0

Related styles

  • NeubrutalismAlso bright and dimensional, but its shadows are solid, flat, and unblurred where clay's are soft and inflated.
  • GlassmorphismSame early-2020s -morphism wave and the same designer behind both names. Glass is light through frosted panes; clay is inflated soft solids, and the two can combine.
  • SkeuomorphismThe tactile, real-world-metaphor tradition all the -morphisms descend from; clay is a partial return to physicality after flat.
  • Flat DesignThe neutral baseline clay decorates. It is best used as a selective enhancement to flat design rather than a replacement for it.
  1. Claymorphism in user interfacesHype4 Academy
  2. Claymorphism: Will It Stick Around?Smashing Magazine
  3. What is claymorphism in web design?LogRocket Blog
  4. Implementing claymorphism with CSSLogRocket Blog
  5. How To Create Claymorphism Using CSSHype4 Academy
  6. Toy Faces 3D Avatar LibraryAmrit Pal Singh
  7. Spline: 3D Design tool in the browserSpline
  8. Glassmorphism vs Neumorphism vs ClaymorphismPixso