{"id":7645,"date":"2022-04-07T08:50:57","date_gmt":"2022-04-07T08:50:57","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=7645"},"modified":"2023-02-21T09:38:46","modified_gmt":"2023-02-21T09:38:46","slug":"how-to-create-a-claymorphism-effect-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/","title":{"rendered":"How to Create a Claymorphism Effect in Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7645\" class=\"elementor elementor-7645\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1485cbd5 thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1485cbd5\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-368c3a87\" data-id=\"368c3a87\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-17911b4 elementor-widget elementor-widget-video\" data-id=\"17911b4\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/fKjiURGiyDI&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-123f8d1a thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"123f8d1a\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7cf61cb3\" data-id=\"7cf61cb3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-11eefd3f elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"11eefd3f\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-3001\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-3001\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-3002\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-3002\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-3001\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-3001\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-3001\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial we\u2019ll learn how to create a claymorphism effect using Elementor. As an added bonus, we\u2019ll teach you two ways to achieve this. The first natively in Elementor, and the second using custom CSS.<\/p><p>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.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e Applying Claymorphism to shapes<br \/>\u2714\ufe0e Applying Claymorphism to buttons<br \/>\u2714\ufe0e Adding custom CSS for further enhancements<br \/>\u2714\ufe0e Using CSS classes for efficiency<br \/>\u2714\ufe0e And much more!<\/p><p>CSS Code Snippets:<br \/><code>selector .elementor-widget-container{<br \/>\nbox shadow: inset 10px 10px 15px #F1FCE3, box shadow: inset -10px -10px 30px #BCD39C;<br \/>\n}<\/code><\/p><p><code>clay .elementor-widget-wrap{<br \/>\nbackground-color: #fff;<br \/>\nbox-shadow: inset 10px 10px 15px #F1FCE3, inset -10px -10px 20px #A9C682, 10px 10px 20px #1F688C42;<br \/>\n}<\/code><\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-3002\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-3002\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-3002\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, Shiri here from Elementor.<\/p><p>In today\u2019s tips &amp; tricks tutorial we\u2019re going to learn how to apply a claymorphism effect to our website.<\/p><p>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.<\/p><p>In the ever expanding world of web creation there are multiple ways to achieve this result.<\/p><p>The first method we\u2019ll learn about will use the box shadow feature.<\/p><p>For the second method we\u2019ll use some custom CSS to further expand the possibilities with claymorphism.<\/p><p>So if you\u2019re ready, open up your editor and let\u2019s get started!<\/p><p>We\u2019ll begin with a pre-created design and we\u2019ll apply our claymorphism effects to really make this website pop out of the screen.<\/p><p>As you can see here we\u2019ve created a shape using the spacer widget. This shape is an ideal candidate for applying a claymorphism effect, so let\u2019s do that now.<\/p><p>Open up the advanced tab, then under border enable the box shadow option.<\/p><p>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.<\/p><p>Using this method, we are able to apply one shadow effect to our element which works pretty well.<\/p><p>Lastly we\u2019re going to give our shadow a darker shade of the pink colour being used to create a ceramic 3D effect<\/p><p>And there we have it, an incredibly simple way to add some depth to our shape.<\/p><p>Let\u2019s now scroll down slightly and find another opportunity where we can apply the claymorphsium effect, but this time we\u2019ll do it with CSS.<\/p><p>Here you\u2019ll see we\u2019ve used another spacer widget to create this shape.<\/p><p>Select it\u2026and then open up the advanced tab\u2026followed by custom CSS.<\/p><p>Paste in the following code, which you\u2019ll find in this video&#8217;s description.<\/p><p>The first shadow is the top right, with a lighter glow.<\/p><p>The second is on the bottom right of our element and has a darker shade of our green.<\/p><p>Feel free to use RGB or RGBA for transparency instead and adjust these values according to your needs.<\/p><p>Moving on, let\u2019s now take a look at a more efficient way of using CSS. Rather than simply repeating the CSS code on each element we\u2019d like to apply our styles to, we\u2019re 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.<\/p><p>Selecting this column, we\u2019ll open the advanced tab, then enter \u2018clay\u2019 into the class name field.<\/p><p>We\u2019ll now repeat this for the other columns.<\/p><p>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\u2026which again can be found in this video\u2019s description.<\/p><p>This will target all of the elements on this page with the class name \u2018clay\u2019.<\/p><p>We can even take this style a bit further and add a third shadow.<\/p><p>You can do this by adding a comma\u2026then repeating the values once more.<\/p><p>To get this to behave like a drop shadow, simply leave out the \u2018inset\u2019 property.<\/p><p>We\u2019ll keep things simple in our example and remove the shadow.<\/p><p>The final element we\u2019re going to apply Claymorphism to is this button which will give it some depth.<\/p><p>We\u2019ll select the button and then open up the style tab. Now enable the box shadow option.<br \/>Let\u2019s set the position to inset first.<\/p><p>Since this is a small button we\u2019re able to apply slighter lower values than before.<\/p><p>\u2018Minus\u2019 8 works well here for the horizontal &amp; vertical\u2026and around 14 for the blur.<\/p><p>Using a white button means we can try something different with our shadow\u2019s 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.<\/p><p>Perfect!<\/p><p>And there we have it. We\u2019ve explored a few different methods of applying Claymorphsim in Elementor.<\/p><p>Feel free to adjust any values and colours to match your own style and be sure to share your creations with us below.<\/p><p>Don\u2019t forget to like and subscribe to our channel and leave a comment below to tell us what you would like to see next!<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial we\u2019ll learn how to create a claymorphism effect using Elementor. As an added bonus, we\u2019ll 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 [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":7646,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-7645","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create a Claymorphism Effect in Elementor - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Claymorphism Effect in Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial we\u2019ll learn how to create a claymorphism effect using Elementor. As an added bonus, we\u2019ll 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 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-07T08:50:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T09:38:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Claymorphism-v04.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ashley Whitehair\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashley Whitehair\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Claymorphism Effect in Elementor - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Claymorphism Effect in Elementor - Academy","og_description":"Overview Transcript Overview In this tutorial we\u2019ll learn how to create a claymorphism effect using Elementor. As an added bonus, we\u2019ll 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 [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/","og_site_name":"Academy","article_published_time":"2022-04-07T08:50:57+00:00","article_modified_time":"2023-02-21T09:38:46+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Claymorphism-v04.png","type":"image\/png"}],"author":"Ashley Whitehair","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ashley Whitehair","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/"},"author":{"name":"Ashley Whitehair","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8"},"headline":"How to Create a Claymorphism Effect in Elementor","datePublished":"2022-04-07T08:50:57+00:00","dateModified":"2023-02-21T09:38:46+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/"},"wordCount":892,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Claymorphism-v04.png","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/","name":"How to Create a Claymorphism Effect in Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Claymorphism-v04.png","datePublished":"2022-04-07T08:50:57+00:00","dateModified":"2023-02-21T09:38:46+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Claymorphism-v04.png","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Claymorphism-v04.png","width":1920,"height":1080,"caption":"How to Create a Claymorphism Effect in Elementor"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-claymorphism-effect-in-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Create a Claymorphism Effect in Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8","name":"Ashley Whitehair","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","caption":"Ashley Whitehair"},"description":"Ashley is an Elementor Specialist with a keen eye for design and a passion for creating user-friendly and effective websites. When he is not creating websites and educational material, he enjoys CrossFit, mountain biking, reading, and exploring the world.","url":"https:\/\/elementor.com\/academy\/author\/user-60190f8d0e66e\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=7645"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7645\/revisions"}],"predecessor-version":[{"id":9329,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7645\/revisions\/9329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/7646"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=7645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=7645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=7645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}