Digital native · 2020–present · Global / networked

Claymorphism & Soft 3D

Also known as Claymorphism, Soft 3D, Fluffy 3D, Clay 3D illustration

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.

Make something in this style Get advice in this style Mix it with another style

Rounded purple and pink lettering reads “Grow Happier” above a smiling white-petaled flower with a yellow center and green leaves. The flower sits in a purple pot decorated with a pink heart, all rendered as soft, rounded three-dimensional forms against a pale lavender background. — AI-generated by Stylogeny from the style’s design choices. Not a real or historical work.

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.

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

Its design choices

From Stylogeny’s vocabulary of design choices: defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

Layout & composition: Isolated object defining
Cards & bento tiles characteristic
Central symmetry occasional
Space & hierarchy: Illusion of depth defining
Single focal point characteristic
Generous white space characteristic
Repetition & rhythm occasional
Typography: Geometric sans characteristic
Rounded sans occasional
Colour: Pastel characteristic
Full polychrome characteristic
Light ground characteristic
Gradients characteristic
Analogous harmony occasional
Form & shape: Rounded & pill defining
Geometric primitives characteristic
Stylised figuration characteristic
Biomorphic curves occasional
Pictogram occasional
Surface & texture: Soft extrusion characteristic
Gloss & highlights occasional
Chrome & 3D render occasional
Ornament: Restrained accents characteristic
Cosmic & celestial occasional
Imagery: 3D render defining
Icons & pictograms characteristic
Medium & production: App & OS interface defining
Web & CSS defining
Motion & broadcast characteristic
Tone & intent: Playful & witty defining
Warm & approachable characteristic
Technological & 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

Make something in this style

Say what you need, and Stylogeny’s image studio draws it from Claymorphism & Soft 3D’s design choices and checks it against them. It takes about a minute, and you get a link to share.

What is it?What is it for, or about?

The words on it No lettering at all

Anything else?

Rule out a choice, read the prompt, or blend in another style: take this brief to Mix styles.

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

Before it

The style it grew out of, and the styles it borrowed from.

Grew out ofNeumorphism2019–2021

This styleClaymorphism & Soft 3D2020–present · Global / networked

After it

The styles that grew out of it.

No later style in the atlas grew out of it yet.

Alike in its design choices

Styles that make many of the same choices, related or not, besides those above.

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)

How Stylogeny researches and checks a style: where the facts come from.