clay.css

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

Clay rocketship blasting off

1. Install it

NPM

npm i claymorphism-css
yarn add claymorphism-css

CDN

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

2. Apply it

Class clay provides bare minimum styles to apply the claymorphism effect to any HTML element. Additional styles (layout, position, colors, borders, etc.) should be added by using an additional CSS class.

HTML

  <div class="clay">
  Fluffy ipsum dolor sit amet consectetur...
</div>
Fluffy ipsum dolor sit amet consectetur, adipisicing elit. Incidunt aliquid distinctio aliquam ratione animi soluta, quisquam in iste illum suscipit recusandae saepe fugiat, vel doloremque consectetur deleniti tenetur eveniet fugit?

3. Mold it

Claymorphic properties (background, border radius, shadows) can be easily customized with CSS variables. All other styles should be added by the additional extending class.

HTML

  <div class="clay card">
  Fluffy ipsum dolor sit amet consectetur...
</div>

CSS

  .card{
  /* Modify clay.css properties */
  --clay-background: #f76d6d;
  --clay-border-radius: 48px;

  /* Extended styles */
  color: #f1f1f1;
  padding: 48px;
}
Fluffy ipsum dolor sit amet consectetur, adipisicing elit. Incidunt aliquid distinctio aliquam ratione animi soluta, quisquam in iste illum suscipit recusandae saepe fugiat, vel doloremque consectetur deleniti tenetur eveniet fugit?

Options

  --clay-background
--clay-border-radius
--clay-shadow-outset
--clay-shadow-inset-primary
--clay-shadow-inset-secondary
CSS variables diagram

SASS Mixin

                
                  @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]
);
3D clay plant