Apply Claymorphism Effects To Elements – clay.css

Preview:

Description:

clay.css is a tiny yet customizable CSS utility library that applies Claymorphism effects To elements using only CSS classes.

How to use it:

1. Download and import the clay.css into your project.

<link rel="stylesheet" href="clay.css" />

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

2. Add the CSS class ‘clay’ to the target element on which you’d like to apply the Claymorphism effect.

<h1 class="clay">Clay.css Library</h1>

3. Customize the Claymorphism effect.

.myElement{
  --clay-background: #f76d6d;
  --clay-border-radius: 32px;
}

4. Or override the default variables in the clay.scss.

$default-background: rgba(0, 0, 0, 0.005);
$default-border-radius: 32px;
$default-shadow-outset: 8px 8px 16px 0 rgba(0, 0, 0, 0.25);
$default-shadow-inset-primary: -8px -8px 16px 0 rgba(0, 0, 0, 0.25);
$default-shadow-inset-secondary: 8px 8px 16px 0 rgba(255, 255, 255, 0.2);