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.
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.
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.
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.
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).
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.
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.
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!
- 8 Stunning CSS Snippets for Creating the Glassmorphism Effect
- 8 Common Website Layouts Built with CSS Grid
- 8 Creative CSS & JS Snippets for Creating Pixelated Backgrounds
- How to Target Design Elements with the CSS :not Pseudo-Class
- 10 Dramatic Examples of Splash Screens in Web Design