We web designers sure do love design trends. Neumorphism, Glassmorphism, and now… Claymorphism. Take an interesting look and add “morphism” to the end – that’s how we roll.
So, what is Claymorphism? It’s a little bit retro with a hint of Material Design mixed in. These elements typically feature rounded corners along with beveled edges. The result is a softly-detailed 3D shape that practically jumps off the screen.
In some ways, it’s reminiscent of the ultra-thick images that were used back in the 1990s. Only this time around, designers don’t need to open up Photoshop. Instead, everything one needs is available via CSS.
If you’re looking to use Claymorphic elements in your designs, you’ve come to the right place. We’ve rounded up eight fun examples that have been modeled with creativity (see what we did there?) – enjoy!
UI Designs by Brandon Caples
Do you have trouble keeping track of design trends? This helpful snippet provides labeled examples for you – including Claymorphism. You might want to print this out and keep it for future reference.
See the Pen UI Designs by Brandon Caples
Claymorphism in User Interfaces by Shakhzod Tojiyev
Card UIs seem to be everywhere these days. They offer an effective means to make similar content items stand out. Here, Claymorphism is used to provide some extra impact without being visually overwhelming. The blue glow around the individual elements is a nice touch.
See the Pen Claymorphism in User Interfaces by Shakhzod Tojiyev
Ventilo by Bailh
This snippet shows that Claymorphism can go beyond 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.
See the Pen Ventilo by Bailh
Claymorphic Dashboard * (Responsive, CSS Only) by Mozzarella
The design trend examples we share tend to focus on a single element. But it’s an extra special treat to find an entire screen devoted to a subject. This dashboard design features buttons, cards, and even a hero image. Be sure to check out the beautiful hover effects as well.
See the Pen Claymorphic Dashboard * (Responsive, CSS Only) by MOZZARELLA
Claymorphism Form Component by Albert
Here’s a real-world example of a Claymorphic container housing a form. Imagine this being utilized in a sidebar or perhaps even a modal window. The effect is subtle – making it a perfect fit for a business website.
See the Pen Claymorphism Form Component by Albert
Claymorphism by Preethi
While there’s nothing fancy about this snippet, it does offer a look at how this trend could apply to an alert message. There’s something to be said for the simplicity here. It grabs your attention, but in a friendly way (the emoji doesn’t hurt, either).
See the Pen Claymorphism by Preethi
wip by Ward Larson
We found a few developers who dared to combine Claymorphism with other trendy looks. This one pairs up the newbie with Glassmorphism, resulting in an ultra-cool UI. The semi-transparent glass container goes beautifully with the smoothly-beveled button.
See the Pen wip by Ward Larson
Untitled by Scott Shields
Perhaps the title of this snippet is uninspiring – but the work itself is quite meaningful. It utilizes Clay.css, a framework that adds Claymorphism to design elements. This is perhaps the quickest solution for those who want to dive headfirst into this style.
See the Pen Untitled by SS
Better Design through Clay
At first glance, Claymorphism may look a bit lighthearted and silly. And it certainly is capable of that kind of aesthetic. However, the potential is there to go deeper.
When utilized with a degree of subtlety, the style could be just the thing to liven up any type of website. It helps to create a natural separation between design elements (such as cards) and makes for a more intuitive UI (3D buttons). That could benefit everyone from bloggers to retailers and beyond.
Looking for more Claymorphism snippets? Check out our CodePen collection!
The post 8 CSS Snippets That Bring Claymorphism to Life appeared first on Speckyboy Design Magazine.
Source: Specky Boy
Originally posted 2022-03-01 19:19:17. Republished by Blog Post Promoter