DEV Community

Cover image for clay.css - micro CSS util for creating claymorphic UI
Adrian Bece
Adrian Bece

Posted on

clay.css - micro CSS util for creating claymorphic UI

clay.css

Extensible and configurable micro CSS util class and SASS mixin for adding claymorphism styles to your components.

Check out the repository and the demo page

About

Claymorphism is a fresh new concept. The name was coined by Michał Malewicz and the designers are excited to explore the possibilities of this approach to UI design.

It features inflated fluffy 3D elements which look charming and introduce a much more vibrant look compared to the usual flat designs.

What sets claymorphism apart from neumorphism is that it floats above the background instead of being connected to it, eliminating accessibility issues and design restrictions of the latter.

Installation

CDN

<link
  rel="stylesheet"
  href="https://unpkg.com/claymorphism-css/dist/clay.css"
/>
Enter fullscreen mode Exit fullscreen mode

NPM

npm i claymorphism-css
Enter fullscreen mode Exit fullscreen mode
yarn add claymorphism-css
Enter fullscreen mode Exit fullscreen mode

Manual

Download and add the dist/clay.css or dist/clay.scss manually.

Usage

This is a minimal, single class CSS util that applies only basic claymorphism styles:

  • Background
  • Border radius
  • One outset shadow
  • Two inset shadows
<div class="clay">
  Fluffy ipsum dolor sit amet consectetur...
</div>
Enter fullscreen mode Exit fullscreen mode

This CSS class allows you to easily change the claymorphic styles via CSS properies. These changes and additional styles should be applied with the extending class.

<div class="clay card">
  Fluffy ipsum dolor sit amet consectetur...
</div>
Enter fullscreen mode Exit fullscreen mode
.card{
  /* Modify clay.css properties */
  --clay-background: #f76d6d;
  --clay-border-radius: 48px;

  /* Extended styles */
  color: #f1f1f1;
  padding: 48px;
}
Enter fullscreen mode Exit fullscreen mode

Options (CSS Variables)

--clay-background
--clay-border-radius
--clay-shadow-outset
--clay-shadow-inset-primary
--clay-shadow-inset-secondary
Enter fullscreen mode Exit fullscreen mode

SASS Mixin

SASS mixin allows you more flexibility in applying claymorphism styles to your components. For example, this way you can easily add styles to pseudo-elements or pseudo-selectors or use the mixin in other SASS mixins or functions.

@import "claymorphism-css/dist/clay.scss";

@import @include clay(
  $background: [value],
  $border-radius: [value],
  $shadow-outset: [value],
  $shadow-inset-primary: [value],
  $shadow-inset-secondary: [value]
);
Enter fullscreen mode Exit fullscreen mode

Demo page

Check out the demo page

Discussion (6)

Collapse
jonrandy profile image
Jon Randy

Really not sure about this design trend. Makes interfaces look like Fisher-Price toys - "Baby's First Website!"

Fisher Price

Collapse
heritio profile image
Heritier Akilimali

looks cool

Collapse
jacksonkasi profile image
Jackson Kasi

nice🤩

Collapse
adrianbdesigns profile image
Adrian Bece Author

Thanks!

Collapse
sandeshsapkota profile image
sandeshsapkota

The demo page looks so great

Collapse
trueqap profile image
TrueQAP

CSS for kids :D