close menu button

Hello there!
Log into the academy:

In order to log into your academy profile, please provide your email and password

Forgot password?

Did you previously use

Don’t have an account yet?

How To Create Claymorphism Using CSS

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

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:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Claymorphism CSS tutorial</title>
    <!-- Your code -->

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

* {
  box-sizing: border-box;

body {
  min-height: 100vh;
  margin: 0;
  background: #D6A2FF;
  color: #2D3557;
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: center;

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

<div class="card">
  <h2 class="card-title">Claymorphism in User Interfaces</h2>
  <p class="card-text">Developer point of view</p>

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:

.card {
  width: 400px;
  padding: 50px;
  border-radius: 30px;
  background: #ffffff;
  text-align: center;
.card-title {
  font-size: 32px;
  margin: 0  0 8px 0;
  line-height: 1.3;
.card-text {
  font-size: 20px;
  margin: 0;
  line-height: 1.3;

Our result:

Claymorphism initial markup

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 multiple box-shadows. We already have border-radius applied, 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 a 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:

.card {
  box-shadow: 0 35px 68px 0 rgba(170,63,254,0.42);

We already have a nice-looking but regular card.

Claymorphism with outer shadow

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

.card {
  box-shadow: 0 35px 68px 0 rgba(170,63,254,0.42), inset 0 -8px 16px 0 #D6A2FF;
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-shadow and border-radius.

Box shadow support:

Box shadow support

Can I Use

Border-radius support:

Border Radius support

Can I Use

Claymorphism too

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.

.card {
  backdrop-filter: blur(15px);
  background: rgba(255,255,255, 0.4);
  box-shadow: 0 35px 68px 0 rgba(170,63,254,0.42), inset 0 -8px 16px 0 #D6A2FF;
Claymorphism and Glassmorphism

Claymorphism in 2022

Claymorphism is 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:

Liked the article? Share it!

twitter iconlinked in iconfacebook icon

Similar articles

Violet umbrella between black umbrellas

The Future of Web - Craft Unique User Experience With CSS Only

Read article
Claymorphism in User Interfaces

Claymorphism in User Interfaces

Read article
Glassmorphism in 2021

Glassmorphism in 2021

Read article