Micro CSS util class for applying inflated fluffy 3D claymorphism styles to HTML elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options.

Hello Product Hunt! Adrian here again with another new tool for web developers. This micro CSS util and a robust SASS mixin allows frontend developers to easily apply claymorphic styles and create inflated fluffy 3d shapes. This concept has been making waves in design communities recently. I was getting kind of tired of the flat designs and minimalist aesthetics which currently dominate the web design landscape, so these vibrant styles stood out to me. I wanted to play around with it and, at the same time, develop a simple and useful way for applying and customizing this style for virtually any element on a page. This project is open-source and feedback is very much welcome. Thank you! Adrian

I see that the rocket is an image. Could I replicate it using this mixin?

@zenekezene Hi. Yeah, you can create CSS art with the mixin and replicate the image, within the limitations of HTML and CSS, of course. Feel free to send over whatever you create with the mixin!

This isn't a design style I've really seen, looks interesting

@simon_barker1 Thanks. It is quite new and bold. I'm excited to see if it's going to take off in 2022

I see that the rocket is an image. Could I replicate it using this mixin?

@zenekezene Hi. Yeah, you can create CSS art with the mixin and replicate the image, within the limitations of HTML and CSS, of course. Feel free to send over whatever you create with the mixin!

This isn't a design style I've really seen, looks interesting

@simon_barker1 Thanks. It is quite new and bold. I'm excited to see if it's going to take off in 2022

clay.css

CSS util for creating inflated fluffy 3D claymorphic shapes

CSS util for creating inflated fluffy 3D claymorphic shapes