Acrylic CSS

A pure css based style for using acrylic effect in websites. This is inspired from Microsoft's Fluent Design Language.
Valid CSS! The acrylic css file passed the W3C validation.
Download Via


  1. Download the css from with NPM or NuGet or GitHub.
  2. Include the acrylic.min.css file in your website.
  3. Change the image URL in background-image:url("../demo/demo.jpg"); to the point to your website background.
  4. Now the effects should work


I thank the stackoverflow users shramee and GibsonFX for their contributions based on which this css is written.


These software is provided on a AS IS basis. No warranty is provided with this software. Make sure to backup your data before using this software.