clay.css

clay.css

CSS util for creating inflated fluffy 3D claymorphic shapes

5 followers

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.
clay.css gallery image
clay.css gallery image
clay.css gallery image
clay.css gallery image
clay.css gallery image
clay.css gallery image
Free
Launch Team
Anima - OnBrand Vibe Coding
Design-aware AI for modern product teams.
Promoted

What do you think? …

Adrian Bece
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
Zeneke
I see that the rocket is an image. Could I replicate it using this mixin?
Adrian Bece
@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!
Simon Barker
This isn't a design style I've really seen, looks interesting
Adrian Bece
@simon_barker1 Thanks. It is quite new and bold. I'm excited to see if it's going to take off in 2022