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:
box shadow: inset 10px 10px 15px #F1FCE3, box shadow: inset -10px -10px 30px #BCD39C;
box-shadow: inset 10px 10px 15px #F1FCE3, inset -10px -10px 20px #A9C682, 10px 10px 20px #1F688C42;