Acrylic CSS

A pure css based style for using acrylic effect in websites. This is inspired from Microsoft's Fluent Design Language.


Download Via
Warning.
This styling works well with Mozilla Firefox and Google Chrome. However there are some difference on the rendering in Microsoft Edge. This is due to the absense of support of some css properties like ackground-blend-mode.

The acrylic css file passed the W3C validation .

Valid CSS!

Usage

  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

Credits

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

Disclaimer

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.