A pure CSS based style for using acrylic effect in websites. This is inspired from Microsoft's Fluent Design Language. The CSS is validated using W3C validation tool.
- Add acrylic.min.css to your website.
- Change the image URL in background-image:url("https://source.unsplash.com/random"); to the point to your website background.
- Now the effects should work
I thank the StackOverflow users shramee and GibsonFX for their contributions based on which this CSS is written.