https://github.com/yell0wsuit/acrylic-mica-css

CSS implementation for Microsoft's acrylic and mica material design
https://github.com/yell0wsuit/acrylic-mica-css

acrylic-css acrylic-material fluent-design mica-material microsoft-design-language

Last synced: 17 days ago
JSON representation

CSS implementation for Microsoft's acrylic and mica material design

• Host: GitHub
• URL: https://github.com/yell0wsuit/acrylic-mica-css
• Owner: yell0wsuit
• Created: 2021-10-26T13:01:31.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-04T03:15:41.000Z (almost 2 years ago)
• Last Synced: 2023-03-06T22:14:00.636Z (almost 2 years ago)
• Topics: acrylic-css, acrylic-material, fluent-design, mica-material, microsoft-design-language
• Language: HTML
• Homepage: https://yell0wsuit.github.io/acrylic-mica-css/
• Size: 679 KB
• Stars: 12
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 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](https://github.com/yell0wsuit/fbgdbg) 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](https://docs.microsoft.com/en-us/windows/apps/design/style/acrylic).  

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](https://docs.microsoft.com/en-us/windows/apps/design/style/mica).

All themes here have black variant for dark theme, which are also based on official documentations.

# Demo

[Acrylic demo](https://yell0wsuit.github.io/acrylic-mica-css/acrylic.html)

[Mica demo](https://yell0wsuit.github.io/acrylic-mica-css/mica.html)