MetalliCSS is a tiny, dependency-free JavaScript library that makes your CSS shine!

Using the library is as simple as adding the class metallicss to an element, and using CSS properties for configuration. The effect will auto-adapt to the elements size, border-radius and background color. See usage examples

Install using npm i metallicss or use the CDN version.

Playground

MetalliCSS+

Want to render a different environment, or enable parallax effects?

MetalliCSS+ offers more options and customization.
Join the waitlist to be the first to get access to extended functionality:

Usage examples

Switch

See the Pen Ezample 3 by Mikael Åsbjørnsson-Stensland (@persille) on CodePen.

Loading spinner

See the Pen Example 2 by Mikael Åsbjørnsson-Stensland (@persille) on CodePen.

Card

See the Pen Untitled by Mikael Åsbjørnsson-Stensland (@persille) on CodePen.