Claymorphism

Claymorphism is a design trend which consists on creating clay like elements and create relief.

To create a claymorphism element, just add the .claymorphism class to any element.

$10/ month
  • ✓ Pick a background
  • ✓ Add the .claymorphism class
  • ✓ That's all !
</> Show code

Glassmorphism & Claymorphism

Glassmorphism is a trend feature which is not supported on all browsers, check the browser list to know if it fits your needs.

You can use the .glassmorphism class as well on a claymorphism element to combine the 2 effects.

Styling

CSS Variable Default value Description
--ax-clay-background rgba(255, 255, 255, 1) Background color.
--ax-clay-blur 5px Blur effect intensity.
--ax-clay-shadow-color 145, 192, 255 Shadow color (RGB).
--ax-clay-shadow Claymorphism shadow.