# Claymorphism & Soft 3D

> A soft, toy-like 3D look from product design around 2020, given the name 'claymorphism' in a December 2021 article by Michał Malewicz. Icons, emoji, avatars and interface cards are modelled as fat, rounded volumes, as if made of clay or inflated vinyl, softly lit and floated alone on pale grounds in candy and pastel colours. Open 3D sets such as 3dicons and Microsoft's 3D Fluent Emoji carry the same look; in interfaces it is faked with two inner shadows and one large drop shadow.

- Period: 2020–present
- Where: Global / networked
- Origin: Online product-design culture around 2020 (Dribbble, Behance, UX Collective), in two strands that Malewicz's article brings together. One is soft 3D illustration made in Cinema 4D and Octane, then in Blender and the browser tool Spline, seen early in Kajdax's 3D visuals for the Pitch website (by February 2020) and Amrit Pal Singh's Toy Faces avatar library (June 2020), then in open icon and emoji libraries such as 3dicons (2021) and Microsoft's 3D Fluent Emoji. The other is interface cards and buttons drawn in CSS as inflated neumorphism. The name 'claymorphism' is credited to Michał Malewicz of Hype4 Academy, from a UX Collective article of December 2021, two years after his 2019 article had given neumorphism its name, adapted from a reader's comment
- Branch: Digital native
- Also known as: Claymorphism, Soft 3D, Fluffy 3D, Clay 3D illustration
- Page: https://stylogeny.com/styles/claymorphism/

## How it works

- Model every icon, character and control as a fat, rounded volume with domed edges and no sharp corners, as if pressed from clay, vinyl or inflated rubber.
- Light each object like a studio shot: a soft key light from the top left, gentle shading into the contact shadow and an opaque satin or matte finish with at most a soft highlight, instead of chrome, glass or wet gloss.
- In the interface, fake the volume with two inner shadows, lighter at top left and darker at bottom right, plus one large, soft, offset drop shadow, so cards and buttons look inflated and float above the page.
- Give each object its own candy or pastel colour against a pale ground, rather than extruding it from a surface of the same colour, and keep strong accent colours where actions and contrast matter.
- Float one hero object or character alone on a plain ground with plenty of room around it, with at most a few small spheres, coins or stars drifting nearby.
- Keep the type minimal, in a geometric sans with few weights (a rounded sans only for the most childlike work), so the friendliness comes from the forms and the words stay legible.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Isolated object](https://stylogeny.com/design-choices/isolated-object/) (defining)
- [Cards & bento tiles](https://stylogeny.com/design-choices/cards-and-bento-tiles/) (characteristic)
- [Central symmetry](https://stylogeny.com/design-choices/central-symmetry/) (occasional)

### Space & hierarchy
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (defining)
- [Single focal point](https://stylogeny.com/design-choices/single-focal-point/) (characteristic)
- [Generous white space](https://stylogeny.com/design-choices/generous-white-space/) (characteristic)
- [Repetition & rhythm](https://stylogeny.com/design-choices/repetition-and-rhythm/) (occasional)

### Typography
- [Geometric sans](https://stylogeny.com/design-choices/geometric-sans/) (characteristic)
- [Rounded sans](https://stylogeny.com/design-choices/rounded-sans/) (occasional)

### Colour
- [Pastel](https://stylogeny.com/design-choices/pastel/) (characteristic)
- [Full polychrome](https://stylogeny.com/design-choices/full-polychrome/) (characteristic)
- [Light ground](https://stylogeny.com/design-choices/light-ground/) (characteristic)
- [Gradients](https://stylogeny.com/design-choices/gradients/) (characteristic)
- [Analogous harmony](https://stylogeny.com/design-choices/analogous-harmony/) (occasional)

### Form & shape
- [Rounded & pill](https://stylogeny.com/design-choices/rounded-and-pill/) (defining)
- [Geometric primitives](https://stylogeny.com/design-choices/geometric-primitives/) (characteristic)
- [Stylised figuration](https://stylogeny.com/design-choices/stylised-figuration/) (characteristic)
- [Biomorphic curves](https://stylogeny.com/design-choices/biomorphic-curves/) (occasional)
- [Pictogram](https://stylogeny.com/design-choices/pictogram/) (occasional)

### Surface & texture
- [Soft extrusion](https://stylogeny.com/design-choices/soft-extrusion/) (characteristic)
- [Gloss & highlights](https://stylogeny.com/design-choices/gloss-and-highlights/) (occasional)
- [Chrome & 3D render](https://stylogeny.com/design-choices/chrome-and-3d-render/) (occasional)

### Ornament
- [Restrained accents](https://stylogeny.com/design-choices/restrained-accents/) (characteristic)
- [Cosmic & celestial](https://stylogeny.com/design-choices/cosmic-and-celestial/) (occasional)

### Imagery
- [3D render](https://stylogeny.com/design-choices/3d-render/) (defining)
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (characteristic)

### Medium & production
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (defining)
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (defining)
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (characteristic)

### Tone & intent
- [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (defining)
- [Warm & approachable](https://stylogeny.com/design-choices/warm-and-approachable/) (characteristic)
- [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (occasional)

Avoids: Iridescent & holographic, Flat, Hard offset shadow, Angular & zigzag, Horror vacui

Palette: #f3eefc, #8b7cf6, #ff9fb6, #ffd36e, #7dd3c0, #3b3355

Typefaces: Geometric sans-serifs such as Poppins (Indian Type Foundry, 2014), kept to a few weights; Malewicz (quoted by Smashing Magazine) and LogRocket both advise minimal, restrained typography beside the clay forms, to counter their childlike feel, Rounded sans-serifs with soft terminals, such as Nunito (Vernon Adams) or VAG Rounded, only for the most childlike or playful products: they echo the inflated shapes but add to the toy-like feel that the minimal type is meant to balance

Known for: Michał Malewicz (Hype4 Academy), 'Claymorphism in user interfaces' (UX Collective, 20 December 2021): names the 'fluffy 3D' trend, describes it as inflated neumorphism and gives the recipe of one large outer shadow and two inner shadows; Pitch, the presentation-software start-up: the 3D key visuals of its website by Kajdax (Anna and Arek), sculpted in Cinema 4D and ZBrush and rendered in Octane, live by February 2020, which Malewicz names as the first time he saw the style go mainstream; Vijay Verma, 3dicons: an open-source CC0 library of 3D icons modelled in Blender, begun in 2021, offered in four styles (Clay, Color, Gradient and Premium) and three camera angles; Microsoft Fluent Emoji: 1,538 emoji open-sourced on GitHub under the MIT licence in August 2022 in 3D, Color, Flat and High Contrast versions; the 3D versions are the ones used in Microsoft Teams; Amrit Pal Singh, Toy Faces: a library of toy-like 3D avatar heads for design mock-ups, made in June 2020 and launched on Product Hunt that month, later also sold as NFTs; Malewicz credits him, Sam Briskar ('Avatarz') and Icons8 with pushing the style; Meng To's 'Claymorphism UI' Figma Community file and Meta's Horizon Worlds app and website illustrations, cited by Smashing Magazine (2022) as examples of clay UI and soft 3D illustration

## Where it comes from, and what it’s close to

- Grew out of: [Neumorphism](https://stylogeny.com/styles/neumorphism.md) (2019–2021)
- Alike in its design choices: [Y2K Futurism](https://stylogeny.com/styles/y2k-futurism.md) (1997–2005), 64% alike
- Alike in its design choices: [Emoji Pictographic Language](https://stylogeny.com/styles/emoji.md) (1997–present), 63% alike
- Alike in its design choices: [Frutiger Aero](https://stylogeny.com/styles/frutiger-aero.md) (2004–2013), 54% alike
- Alike in its design choices: [Skeuomorphic UI](https://stylogeny.com/styles/skeuomorphism.md) (2000–2013), 53% alike
- Alike in its design choices: [Corporate Memphis](https://stylogeny.com/styles/corporate-memphis.md) (2017–present), 51% alike
- Alike in its design choices: [Glassmorphism](https://stylogeny.com/styles/glassmorphism.md) (2020–present), 48% alike

## Sources

- Michał Malewicz, 'Claymorphism in user interfaces', UX Collective (20 December 2021), https://uxdesign.cc/claymorphism-in-user-interfaces-1757fabaa377; also at https://hype4.academy/articles/design/claymorphism-in-user-interfaces ('fluffy 3D' as inflated neumorphism, the one-outer and two-inner-shadow recipe, Pitch as its first mainstream use, Amrit Pal Singh, Sam Briskar, Icons8 and Spline, minimal typography to counter the childlike feel)
- Adrian Bece, 'Claymorphism: Will It Stick Around?', Smashing Magazine (16 March 2022), https://www.smashingmagazine.com/2022/03/claymorphism-css-ui-design-trend/ (term coined by Malewicz, CSS recipe, soft 3D sets including 3DIcons, Dribbble shots by Vitalii Zhy, Rezha Aaron and Rushabh Khasnis and Meng To's Figma file, Meta's Horizon Worlds)
- Aloke Pillai, interview with Kajdax (Anna and Arek) on the 3D work for Pitch.com, Pastel blog (18 February 2020), https://usepastel.com/blog/exploring-3d-design-for-the-web-a-chat-with-pitch-com (Cinema 4D, ZBrush, Octane; website already launched)
- Michał Malewicz, 'Neumorphism in user interfaces', Hype4 Academy, https://hype4.academy/articles/design/neumorphism-in-user-interfaces (the name first suggested as 'Neuomorphism' by Jason Kelley in the comments, then shortened by Malewicz; Plyuto's Dribbble shot pushed the trend)
- Wikipedia, 'Neumorphism', https://en.wikipedia.org/wiki/Neumorphism (term coined by Jason Kelly, 2019; Plyuto's mock-up)
- Microsoft, fluentui-emoji repository (MIT licence; 3D, Color, Flat and High Contrast versions of each emoji), https://github.com/microsoft/fluentui-emoji
- João Carrasqueira, 'Microsoft open sources its Windows 11 emoji for everyone to use', XDA Developers (10 August 2022), https://www.xda-developers.com/microsoft-open-source-fluent-emoji/ (1,538 emoji; the 3D versions are those used in Teams)
- Vijay Verma, 3dicons, https://3dicons.co/, https://old.3dicons.co/ and https://github.com/realvjy/3dicons (CC0 licence, icons designed in Blender, repository created May 2021, Clay, Gradient, Color and Premium styles, three camera angles)
- Amrit Pal Singh, https://amrit.art/ (Toy Faces library and NFTs)
- Toy Faces Library by Amrit Pal Singh, Product Hunt, https://www.producthunt.com/products/toy-faces-library (launched 2020; #4 product of the day on 15 June 2020)
- Samyukhtha Sunil, 'Amrit Pal Singh Is Blazing A Bold New Trail for Homegrown NFTs', Homegrown (6 January 2022), https://homegrown.co.in/article/806011/amrit-pal-singh-is-blazing-a-bold-new-trail-for-homegrown-nfts ('I created Toy Faces as an avatar library in June 2020')
- Spline, https://spline.design/ ('a free 3D design tool in the browser')
- Angela Fabunan, 'What is claymorphism in web design?', LogRocket Blog (22 May 2024), https://blog.logrocket.com/ux-design/what-is-claymorphism-web-design/ (outer plus inner shadows, strong colour cues, restrained typography, Toy Faces avatars)

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Claymorphism & Soft 3D”, https://stylogeny.com/styles/claymorphism/