When to use Acrylic.

Acrylic in Fluent Design is the easiest way to not only decorate your application with a transparent effect, but also a way to add contrast to your ui. And the more correct you use it, the better the positive effect.

Personally, I recommend using the acrylic effect in the navigation bars, window titles, and various other controls, such as Button, TextField, and others.

In the example above, the acrylic effect is used to create the effect of contrasting navigation bars with the rest ui elements of the applications.

In the example above with Microsoft Store, an acrylic effect is used to create a contrast effect for title bar windows and tabs with the rest of the ui application.

Here is another example of an acrylic effect on a titlebar window.

The acrylic effect can also very well be combined with dialog boxes, of course it can relate to a simple background with color having transparency, but I think that it refers to the acrylic effect.

Acrylic effect can also have its own color, and have a different transparency. Some examples of standard applications you can see below.

Summary: It is advantageous to use the acrylic effect when you need to create a contrast effect between the controls, give depth and transparency and just beauty. The main thing is to use adequate transparency so that the elements can be readable against the background of the acrylic effect.

Of course, the abuse of the acrylic effect can very badly affect the appearance of the application, it should not be used everywhere.

Details in acrylic effect article

Join in telegram channel Fluent Design

It article has been based on alternate article.