Glassmorphism design style

前言

特征

The frosted glass mimics the plastic material（Bump texture,凸显层次感）,This new visual style pays more attention to vertical spaceZ轴的使用：

• 透明感（Use background blur/Gaussian blur frosted glass effect）
• Objects float in space,The sense of hierarchy is expressed through the contextual relationship
• Vibrant color sense,Blur transparency is more prominent
• Subtle handling of the edges of translucent objects,A delicate frame is used to express the glass texture

This is a typical feature of focusing on a sense of space,Means this style helps the user to establish hierarchy and depth in the interface.The user can see the hierarchical relationship between objects,Which layer is above which layer,Just like real glass in space.

实例

Glass mimetic style design：

Glass mimetic style icon：

Web page header：

不足

The simulated effect of frosted glass is not well applied to online products.It doesn't work with buttons or switches（These important interface elements should have high contrast,更加清晰明确）,The blur effect should also pay attention to the scale,Excessive use of blur effects on the screen,会使整个 UI Poor readability for some users,It also makes the page look dirty.

The realization of glass mimicry

The effect itself is easy,But there are two points to consider.As with any card-based layout,第一个是-Objects are closer to us,The more light it attracts.在这种情况下,This means it will be more transparent.

The basis of the whole effect is the shadow、A combination of transparency and background blur,Only one transparent layer can be used for this style,or multiple transparent layers,But when at least two translucent layers appear on a rather busy colored background,It is the most prominent and visible.

设置透明度

无论如何,You can't make the whole shape transparent,Just make it's fill transparent.Most design tools are populated as 100%,When the object's transparency is low,Background blur will not work.

在上面的示例中,The background blur values ​​are exactly the same,为8,But the images look completely different.When the fill opacity is 100％时,It doesn't matter how low the opacity of the object is.We simply don't get the blurry background we want.

Choose an appropriate background

The background plays an important role in this effect.Not too simple or too monotonous,Otherwise, the effect will not be seen,They also can't be too complicated.

这可能就是AppleChoose a colored background asMac OS Big SurThe reason for the default wallpaper.When a blurry transparent surface is on top of it,Those easily discernible tonal differences are also easy to see. When selecting a background,Make sure it has enough shade difference,to make the glass effect really visible.

细节

The last thing you can try is adding to the shape1px内边框,and has a certain degree of transparency.It simulates glass edges,Shapes can be made to stand out from the background. Despite the elements of this style（such as blurred backgrounds）已经存在了很多年,But it is becoming more and more popular,因此,There are still plenty of cool creative effects to explore here.

The image on the left has a semi-transparent border,The image on the right is borderless.

辅助功能

就像Neumorphism一样,This style may not be like the defaultMaterial DesignSo easy to use. NeumorphismThe main rules of . can also be translated here-If you have a good functional hierarchy,then the element on the screen should work without the background,This ensures that people with visual impairments can still understandUI.

This is a bad example of the same as Neomorph,It abuses the effect on every possible screen element.这样,Some users have almost no access to the wholeUI,It also makes it boring and primitive at the same time. Only if these transparency effects are only decorative,rather than an integral part of the experience,才会发生这种情况.They should be avoided for buttons or toggles（These important objects should always have greater contrast）,But you can use it for card background. Just make sure the inside of the card has enough contrast and proper spacing to define the hierarchy,and visually all related objects“分组”.

Here's a better example-The card has a well-defined structure,So even the glass background is completely removed,Its contents can also be used normally.这是一个简单的示例-Color contrast can still be improved.

CSSRealize glass mimicry

.glass {
	height: 399px;
	width: 199px;
	background: rgba( 255, 255, 255, 0.25 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur( 5px );
	-webkit-backdrop-filter: blur( 5px );
	border-radius: 10px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.container{
	height: 100vh;
	background: linear-gradient(45deg, #FC466B, #3F5EFB);
   display: flex;
   align-items: center;
   justify-content: center;
}

复制

<div class="container">
	<div class="glass"/>
</div>

复制

后记

Frosted glass mimicry（Glassmorphism）是Michal MalewiczA new design style proposed,原文发布在uxdesign：Glassmorphism in user interfaces.

Personally, I feel that this design style is not suitable for large-scale use,As well as body parts where a lot of text appears,会影响阅读.

在线生成工具：

An online generation tool for glass mimicryGlass mimetic style