/fluent-ui-blur.css

CSS implementation of Microsoft's Fluent UI blur effect seen in Windows 10 apps.

MIT LicenseMIT

fluent-ui-blur.css

CSS implementation of Microsoft's Fluent UI blur effect seen in Windows 10 apps.

Simply add one class to an element (either .fluent-ui-blur-light or .fluent-ui-blur-dark) and that's it!

Note that this uses the backdrop-filter CSS property, which means browser support may vary, but it'll work perfectly on Chromium based browsers such as Google Chrome and Microsoft Edge.

Example

Top is light blur, bottom is dark blur Example