Beyond Flat: The Pull of Soft 3D Interfaces
For a decade, flat and Material design have ruled web UI. Their minimalism favors performance and clarity, using subtle shadows and gradients to suggest depth while relying on color and typography for hierarchy. Yet, the recent rise of colorful, inflated 3D graphics in web illustrations and VR projects like Meta’s “Horizon Worlds” has pushed a more tactile aesthetic back into the spotlight. This renewed interest has given us Claymorphism — a CSS-friendly style that looks poised to stick around as a practical enhancement rather than a passing gimmick.
From Skeuomorphism to Soft Depth
Early interfaces leaned on Skeuomorphism to ease users into new technology. Real-world metaphors — a trash can for deletion, a television for a video app on the original iPhone — made digital spaces intuitive. However, this realistic approach didn't translate well to the web, where clean layouts and responsiveness were priorities. As mobile performance became a key concern, detailed graphics gave way to flat design and its successor, Material design, which offered a customizable, high-performing aesthetic that adapted to any screen.
The desire for a more three-dimensional UI resurfaced in 2020 with Neumorphism. Instead of floating elements above the background, this style made them extrude from it. By using light and dark shadows with a matching background color, elements appeared to be pushed out of the canvas. Despite its fresh look, Neumorphism had critical flaws: the strict background matching limited visual hierarchy, made branding difficult, and often created accessibility problems with poor contrast. It failed to provide a solid foundation for effective, distinct call-to-action elements and quickly felt monotonous.
The Rise of 3D Softness
Meanwhile, digital illustrations exploded in popularity. Tools like Spline allowed designers to explore 3D graphics, leading to the "soft inflated" style. When combined with flatter UIs, these colorful shapes injected playfulness and energy. Design kits such as Humans 3.0 and 3DIcons gained traction, and Meta’s “Horizon Worlds” fully adopted this vibrant look for its VR experience.
It was only a matter of time before this aesthetic trickled into UI controls themselves. That’s where Claymorphism comes in — a term coined by Michal Malewicz, the designer behind the earlier Neumorphism trend. While it builds on the rounded, tactile foundations of Neumorphism, Claymorphism solves its predecessor’s major issue. Instead of two outer shadows that require a matching background, Claymorphism uses two inset shadows (one light, one dark) and one outer shadow to achieve a soft, floating 3D effect. This technique decouples the element's color from the background, allowing for any palette and restoring the ability to create visual hierarchy and branding.
The style is not without its critics. Overuse can impart a childish tone to an interface. As Malewicz notes, “The friendliness of those shapes, along with the 3d imagery creates a slightly child-like interface. To counter it, it’s good to use minimal typography, strong accent colors good contrast.” The style shines best as an additive layer to flat layouts — more capable than Neumorphism, but still reliant on flat design’s structure for usability.
Where Claymorphism Works Best
More prominent call to action elements: The inflated effect adds weight and attention, making buttons stand out without requiring loud, flat colors.
Select and toggle elements: The soft depth makes the "on" state of a switch feel literally pressed into the surface, mimicking physical interaction.
Charts: Displaying data in 3D bubbles or rounded bars can make dashboards feel dynamic and easier to scan.
Cards and containers: Using clay styling for static content blocks adds a tactile quality without impacting read speed or contrast as much as Neumorphism would.
Implementing Claymorphism with CSS
The core effect is achievable with a few CSS properties:
We use background or background-color for the canvas, border-radius to soften edges, and box-shadow to create the three-dimensional illusion with out-and-inset shadows. A true "inflated" look is hard to achieve purely with CSS, but it’s not necessary for most UI purposes.
Repeating rules for each card can bloat a stylesheet. A helpful approach is a utility class that allows for custom properties without high specificity conflicts. Projects can also leverage a standalone micro CSS library called clay.css, available via CDN or as an NPM package, which offers a fully customizable class. It can even be used as a SASS mixin to apply the effect to pseudo-elements.
Accessibility Considerations
Unlike Neumorphism, Claymorphism does not inherently break contrast rules. However, because depth and color are central to the style, careful planning is still necessary. Designers must maintain a clear visual hierarchy, being careful that the 3D effect doesn’t unintentionally de-emphasize critical interactive elements. Proper color contrast remains vital for users with low vision or color blindness. Furthermore, the floating nature of clay elements lends itself to 3D-button-press animations — any motion should respect the user's reduced-motion preferences.
A New Soft Spot in UI Design
Claymorphism borrows the visual language of soft 3D — rounded corners, exaggerated highlights, layered depth — and applies it to traditional 2D interfaces. In practice, it looks like UI elements with a dual shadow scheme: one light and soft to suggest top illumination, and another darker one beneath to imply a thick, pillowy extrusion. The result is a chunky, tactile interface that mimics physical play-dough or soft plastic, rather than the glassy or glossy effects of earlier skeuomorphic eras.
Claymorphism vs. Neumorphism
Neumorphism, or soft UI, was one of the first serious attempts to shake up the flat and Material design establishment. It proposed interfaces where elements appear to be carved out of or pressed into the same monochromatic background. While visually striking in concept, it ran into immediate problems in practice. The main culprit is accessibility: because neumorphic elements are rendered almost exclusively using subtle shadows against a single background color, they tend toward extremely low contrast. Text and icons often fail normal WCAG contrast thresholds, and the whole style works best with a narrow range of muted background tones, making it hard to deploy across diverse brand palettes or context-rich pages. Also, there was no obvious way to indicate interactive states like hover or active without the layout becoming noisy.
Claymorphism addresses many of these pain points. Unlike true neumorphism, clay UI does not need a monochrome workspace. Its defining features are the added depth — often via a box-shadow that runs the full height of the element — combined with saturated or contrasting accent colors. Because an object has its own colored surface (instead of being a pure shadow effect on the canvas), color contrast between content and background remains far more manageable. Moreover, the design tends to tolerate a broader spectrum of color palettes, preserving both readability and visual hierarchy.
Why Claymorphism Took Off (or So It Seems)
Timing in design matters, and a notable factor behind the rise of claymorphism is the simultaneous growth of soft 3D illustration styles. From dashboards to gaming interfaces, designers have flocked to chunky, pillow-like 3D elements in illustrations for landing pages and onboarding screens. Tools like VR and AR ecosystems—for instance, Meta’s “Horizon Worlds”—have also pushed pastel-heavy, playful volumetric shapes into the mainstream, making the style feel current and intuitive. Claymorphism’s foundations don’t contradict those visual languages; they harmonize with them. The trend can also be seen slowly migrating into standard web components such as charts and buttons, where a soft 3D treatment lends a friendly, tactile quality to data visualization.
Technical Viability
For frontend developers, the trend is relatively easy to prototype using standard CSS. Generating a clay handle typically involves layering a standard box-shadow with a large blur and spread, then adding an inset highlight and, often, a complementary thick border to define the elevated shape. The ability to control this effect with nothing but pure CSS enables rapid iteration in modern web languages—whether utility classes in Tailwind or plain CSS modules.
This flexibility makes claymorphism a feasible option for incorporation into design systems. Atomic-level components like buttons, range sliders, checkboxes, and cards are all contained ways to apply the aesthetic. It also doesn’t demand the all-or-nothing adoption that plagued neumorphism at scale — combining it with ordinary flat components for interactions like data tables or modal boxes is possible without causing visual collapse. Early accessibility testing shows that as long as accent and background shades maintain sufficient contrast, simple interactions remain clear.
Prospects
Whether this style becomes a permanent fixture or a popular flash in the pan is uncertain. Its odds look promising given its flexibility in adjustment and its absence of the accessibility bugs that kneecapped earlier “soft” UI attempts. But the design community moves fast, and a trend only sticks when it proves value across production environments — not just in concept pieces. Early signs, however, point in an encouraging direction: the style has momentum behind it, a growing set of onboarding tooling, and cross-disciplinary spill-over from illustration and 3D design.
Looking Ahead
For designers and developers eyeing this for their next project, the best starting points are the reference articles on the foundation and a look at practical CSS recipes that create believable clay forms. It is equally worth testing this in global design systems, especially where an accessible and inclusive upgrade to flat layout is welcome. If the community pushes forward, a vibrant, cushioned UI aesthetic might indeed become a normal sight on the web — not replacing flat design but providing a chunkier, more engaging alternative.
