We web designers certainly love design trends. Neumorphism, Glassmorphism, and now… Claymorphism. Look interesting and add “morphism” to the end – that’s how we roll.
So what is Claymorphism? It’s a bit retro with a hint of Mixed Content Design in. These elements usually have rounded corners as well as beveled edges. The result is a soft-detailed 3D shape that practically jumps off the screen.
In some ways, it is reminiscent of the ultra-thick images used in the 1990s. This time only, Photoshop designers do not need to open it. Instead, everything you need is available through the SEC.
If you are looking to use Claymorphic elements in your designs, you have come to the right place. We’ve put together eight fun examples that are shaped by creativity (see what we did then?) – enjoy!
Interface Designs by Brandon Caples
Having trouble keeping track of design trends? This helpful snippet provides you with labeled examples – including Claymorphism. You may want to print this out and keep it for future reference.
Check out the Pen UI Designs by Brandon Caples
Claymorphism in User Interfaces by Shahzod Tojiyev
UI cards seem to be everywhere these days. They provide an effective way of standing up for similar items of material. Here, Claymorphism is used to provide an extra impact without being overly visual. The blue glow around the individual elements is a nice touch.
See the Pen Claymorphism in User Interfaces by Shakhzod Tojiyev
Ventilo at Bailh
This section demonstrates that Claymorphism can transcend static elements. Here, 3D shapes fly around the screen in a confetti-like animation. JavaScript powers the movement, but the clay adds to the overall aesthetic.
Look at the Ventilo Pen with Bailh
Claymorphic Panel * (Responsive, CSS Only) and Mozzarella
The examples of design trends we share will usually focus on one element. But it’s interesting to find a full – fledged, content – oriented screen. This panel design includes buttons, cards and even a hero image. Be sure to check out the beautiful hover effects as well.
View the Claymorphic Pen Desktop * (Responsive, CSS Only) by MOZZARELLA
Claymorphism Form Component by Albert
Here is a real life example of a Claymorphic container containing a form. Imagine this being used in a sidebar or maybe even a modal window. The effect is subtle – making it a perfect fit for a business website.
See Albert Claymorphism Form Component by Albert
Claymorphism and Preethi
While there is nothing fancy about this fragment, it does offer a look at how this trend might be applied to an alert message. There is something to be said for simplicity here. It grabs your attention, but in a friendly way (the emoji doesn’t hurt, either).
See the Pen Claymorphism with Preethi
tear and Ward Larson
We found a couple of developers who were keen to combine Claymorphism with another trendy look. This one pairs the newbie with Glassmorphism, resulting in an ultra-cool UI. The semi-transparent glass container goes beautifully with the ready-beveled button.
Look at the Wip Pen with Ward Larson
Untitled by Scott Shields
The title of this cut may not be inspiring – but the work itself has a lot of meaning. It uses Clay.css, a framework that adds Claymorphism to design elements. This is perhaps the quickest solution for those who want to dive first in this style.
See the Untitled Pen by SS
Better Design through Clay
At first glance, Claymorphism may seem a little mild and silly. And it’s certainly capable of that kind of aesthetic. However, there is the potential to go deeper.
When used with a bit of subtlety, the style could be just the thing that liven up any type of website. It helps to create a natural separation between design elements (like cards) and creates a more intuitive UI (3D buttons). That could benefit everyone from bloggers to retailers and beyond.
Looking for more Claymorphism clips? Take a look at our CodePen collection!
