How To Create Claymorphism Using CSS

A look at the new UI design trend from a developer’s point of view

Albert Walicki
Better Programming
Published in
4 min readDec 20, 2021

--

Image by author

It’s almost the end of the year, and as you might expect, Mike Malewicz created a trend in user interfaces — Claymorphism.

This trend is getting more and more popular on Dribble and Behance. Let me introduce you to Claymorphism from a developer’s point of view and explain how to create it using CSS.

What is Claymorphism?

Claymorphism creates an illusion of depth in our layouts, and it contains:

  • light, pastel, and vivid colors
  • big rounded corners
  • double inner shadow
  • outer shadow

Getting started

The requirements for this tutorial are very low, and it can be created even by aspiring junior frontend developers. All we need is HTML and a few CSS properties.

Initial markup

Let’s create a basic HTML markup:

Then let’s add some basic CSS for the body tag:

Our starter is created. Now let’s create our card HTML markup and place it inside the body tag:

Before creating the Claymorphism effect, we can apply some styles to our card to look better. Let’s start with typography, more space, and rounded corners:

Our result:

Awesome! Now our basic markup is ready. Now let’s dive into box-shadow.

Box shadow — how to use it

As I mentioned before, claymorphism consists of big rounded corners and multiplebox-shadows. We already have border-radiusapplied, so let's focus on box-shadow.

The box-shadow property allows casting a shadow from the element. We have just one shadow in most cases, but while creating Claymorphism, we need to have at least two! It’s effortless to add more than one. All we need to do is to separate them by comma, and that’s it!

I will have one inner and one outer in my example but feel free to test how it might look with more than two shadows.

But hey, Albert! How do we create inner shadows?

It’s simple. We need to add special value inset before our shadow. This will inform our browser that this particular shadow is an inner shadow. By default, we create outer shadows.

Look at the list, what box-shadow is consists of:

  • inset
  • offset X
  • offset Y
  • blur radius
  • spread radius
  • color

Now you know how box-shadow works. Let’s get our hands dirty.

Claymorphism shadow effect

Finally, it’s time to create our effect. First of all, we need to add primary outer shadow, for example like this one:

We already have a nice-looking but regular card.

Card with outer shadow

Then we just need to add inner shadow, like this:

Claymorphism with outer and inner shadow

Well done! We have created the Claymorphism effect using CSS.

Browser support

All browsers — modern ones and almost ancient like Internet Explorer 9 or 10 supports all requirements for Claymorphism — box-shadowand border-radius.

Box shadow support:

Box Shadow support
Can I Use

Border-radius support:

Border radius support
Can I Use

Claymorphism generator

As a part of the claymorphism journey, we created a Claymorphism Tool just for you to play! Feel free to use it.

Claymorphsim + Glassmorphism

Yes! We can combine both styles to receive even better results. We simply need to add a backdrop-filter and some transparency to our white background.

Claymorphism and Glassmorphism

Claymorphism in 2022

Claymorphismis one of the best and newest design trends. On the contrary to Neumorphism, it has no problems with accessibility and compared to Glassmorphism, and all browsers perfectly support it.

Codepen with our exercise is here.

I created also a few different examples:

Originally published at https://hype4.academy.

--

--

Albert Walicki
Albert Walicki

Written by Albert Walicki

Frontend developer, entrepreneur, biker. 👉 My Frontend book: www.frontendunicorn.com 👉 We build apps at www.hype4.com

Responses (4)