DEV Community

Cover image for Claymorphism on 2022🎁 (CSS only)
Preethi⚡
Preethi⚡

Posted on • Updated on

Claymorphism on 2022🎁 (CSS only)

Hey There, Hope this new year✨ give you a fabulous moments. There are some trends for every year like Skeuomorphism ➡️ Neumorphism ➡️Glassmorphism ➡️Now, The brand new trend is Claymorphism🎉.

Due to accessibility issues, Some trends can't be hero of the year in real-time😥. Uh, Don't worry guys Claymorphism didn't make any accessibility issues.

Why Claymorphism🤔

Really getting bored with flat designs and world excited for changing UI to 3D. From 2022, we introduce that 3D feel in web world. Sounds amazing right✨ and we can introduce this Claymorphism from pages to atom components. I care to save developer time and let's get this show on the road🎉.

Image description

Claymorphism made by 4 styles

  1. Light, pastel, and vivid colors
  2. Big rounded corners
  3. Double inner shadow
  4. Outer shadow

In-depth on box-shadow

box-shadow is the main guy for that magical shadow effect. So, we need aware of that.

Specify a single box-shadow using:

  • Two, three, or four values. If only two values are given, they are interpreted as offset-x and offset-y values. If a third value is given, it is interpreted as a blur-radius. If a fourth value is given, it is interpreted as a spread- radius.

To specify multiple shadows, provide a comma-separated list of shadows.

  • Optionally, the inset keyword.
  • Optionally, a color value.

Note: Claymorphism is made up of inner shadow and outer shadow

How do we create inner shadows

It’s actually effortless😍. 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. Below code snippet, illustrate the claymorphism made by one outer shadow and at least two inner shadows.

box-shadow: 24px 24px 48px rgba(174, 210, 236, 0.4),
    inset 12px 12px 24px #e7f2f9, inset -24px -24px 48px #b8d8ee;
Enter fullscreen mode Exit fullscreen mode

Now I thought, you are be like😉
Image description
Hey still with me. You really curious about trends like trend lovers💖. So, it's my pleasure to give you the live experience and you will playing with that magical shadows🪄.

Or you just fork my repository🎁 and practice in your own pace.

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

Thanks for Reading!!
Preethi
- Make your CSS life easier

Discussion (8)

Collapse
rhytham profile image
Rhytham

It very Nice. It is very attractive for users. I love it :)

Collapse
atulcodex profile image
Atul Prajapati

It is very useful and nice looking component :) I love it

Collapse
preethi_dev profile image
Preethi⚡ Author

Feel cheerful🎉 while see your comment. Hope we will meet on upcoming blogs.

Collapse
atulcodex profile image
Atul Prajapati

why not :)

Collapse
raquelhortab profile image
raquelhortab

Hi! Is there an actual CSS way to achieve the image in the header? That image has curved edges, in contrast to what is achieved here, which has flat edges. It makes quite a difference. It felt a bit like falling for a clickbait!
Thanks

Collapse
manchynskyi profile image
Valerii Manchynskyi
Collapse
preethi_dev profile image
Preethi⚡ Author

well liked

Collapse
frontend profile image
frontend

Here are some latest collection of claymorphism front-end.codes/claymorphism-design/