In this tutorial we’ll learn how to create a claymorphism effect using Elementor. As an added bonus, we’ll teach you two ways to achieve this. The first natively in Elementor, and the second using custom CSS.
Claymorphism is a style that gives your website elements a light 3D effect and it is achieved by combining two shadows. It kinda looks like clay and therefore is named claymorphism.
The tutorial will cover:
✔︎ Applying Claymorphism to shapes
✔︎ Applying Claymorphism to buttons
✔︎ Adding custom CSS for further enhancements
✔︎ Using CSS classes for efficiency
✔︎ And much more!
CSS Code Snippets:selector .elementor-widget-container{
box shadow: inset 10px 10px 15px #F1FCE3, box shadow: inset -10px -10px 30px #BCD39C;
}
clay .elementor-widget-wrap{
background-color: #fff;
box-shadow: inset 10px 10px 15px #F1FCE3, inset -10px -10px 20px #A9C682, 10px 10px 20px #1F688C42;
}
Hey there, Shiri here from Elementor.
In today’s tips & tricks tutorial we’re going to learn how to apply a claymorphism effect to our website.
Claymorphism is a technique used to give your website elements an effect of depth and it is achieved by combining two shadows. It kinda looks like clay and therefore is named claymorphism.
In the ever expanding world of web creation there are multiple ways to achieve this result.
The first method we’ll learn about will use the box shadow feature.
For the second method we’ll use some custom CSS to further expand the possibilities with claymorphism.
So if you’re ready, open up your editor and let’s get started!
We’ll begin with a pre-created design and we’ll apply our claymorphism effects to really make this website pop out of the screen.
As you can see here we’ve created a shape using the spacer widget. This shape is an ideal candidate for applying a claymorphism effect, so let’s do that now.
Open up the advanced tab, then under border enable the box shadow option.
First we change the position to inset. Now we need to apply a slight horizontal and vertical distance to our box shadow effect. This should be no smaller than 10px and twice as much of this value in the blur.
Using this method, we are able to apply one shadow effect to our element which works pretty well.
Lastly we’re going to give our shadow a darker shade of the pink colour being used to create a ceramic 3D effect
And there we have it, an incredibly simple way to add some depth to our shape.
Let’s now scroll down slightly and find another opportunity where we can apply the claymorphsium effect, but this time we’ll do it with CSS.
Here you’ll see we’ve used another spacer widget to create this shape.
Select it…and then open up the advanced tab…followed by custom CSS.
Paste in the following code, which you’ll find in this video’s description.
The first shadow is the top right, with a lighter glow.
The second is on the bottom right of our element and has a darker shade of our green.
Feel free to use RGB or RGBA for transparency instead and adjust these values according to your needs.
Moving on, let’s now take a look at a more efficient way of using CSS. Rather than simply repeating the CSS code on each element we’d like to apply our styles to, we’re going to give these elements a class name instead. This will allow us to write the CSS once and target all elements which use this class name.
Selecting this column, we’ll open the advanced tab, then enter ‘clay’ into the class name field.
We’ll now repeat this for the other columns.
Now simply click the gear icon found in the bottom left corner of the editor to open the page settings, and in the advanced tab, add the following CSS code…which again can be found in this video’s description.
This will target all of the elements on this page with the class name ‘clay’.
We can even take this style a bit further and add a third shadow.
You can do this by adding a comma…then repeating the values once more.
To get this to behave like a drop shadow, simply leave out the ‘inset’ property.
We’ll keep things simple in our example and remove the shadow.
The final element we’re going to apply Claymorphism to is this button which will give it some depth.
We’ll select the button and then open up the style tab. Now enable the box shadow option.
Let’s set the position to inset first.
Since this is a small button we’re able to apply slighter lower values than before.
‘Minus’ 8 works well here for the horizontal & vertical…and around 14 for the blur.
Using a white button means we can try something different with our shadow’s colour. Instead of using gray we can use a darker shade of our background colour. This will give the effect that light is reflecting from it.
Perfect!
And there we have it. We’ve explored a few different methods of applying Claymorphsim in Elementor.
Feel free to adjust any values and colours to match your own style and be sure to share your creations with us below.
Don’t forget to like and subscribe to our channel and leave a comment below to tell us what you would like to see next!
