This repo attempts to recreate Acrylic and Mica material design in CSS.
==NEW! Also check out my fbgdbg - Facebook Gradient Background repo - colorful gradient background found in Facebook Account Center setting==
Acrylic material is implemented by using backdrop-filter
. This feature works best with a background image. Currently this only implemented 2 out of 4 layers: blur and noise texture. It is based on this documentation.
Note that Firefox does not support this feature, to use this, you need to enable layout.css.backdrop-filter.enabled
and gfx.webrender.all
in about:config
.
Mica material can be used with or without backdrop-filter
. It is based on this documentation.
All themes here have black variant for dark theme, which are also based on official documentations.