Skip to content

yell0wsuit/acrylic-mica-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Microsoft's Acrylic & Mica material design in CSS

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.

Demo

Acrylic demo

Mica demo

About

CSS implementation for Microsoft's acrylic and mica material design

Topics

Resources

Stars

Watchers

Forks

Languages