In-depth analysis of Glassmorpism: The new pet of modern UI design
Glassmorphism was a UI that emerged in the 2020s. Design style, with core features that are vague through background (Backdrop) Blur, transparency levels and subtle borders simulate the visual effects of sand-brushing glass. This style was first created by Apple in iOS 7 . The new text is included in the list of selected entries, and is further enhanced in the MacOS Big Sur and Windows 11.
Specific application scenario for the fur glass effect
- Raise the sense of hierarchy: By blurring the background, the upper card or bullet window can be “floating” on the visual side of the background without completely severing the entire sense of the page.
- Enhancing readability: In complex pictures or colourful contexts, it is often difficult to read text directly. The fur glass layer provides a semi-transparent “mask” that, while retaining the background tone, provides a pure display space for the text.
- Modern senses and superior senses: The gross glass effect is more respiratory and perceptive than pure colour and is well suited for use in side bars, navigation bars or login cards.
How do you achieve the extreme fur glass effect through CSS?
The key to achieving Glassmorphism lies in the alignment of two core CSS attributes:
-
backdrop-filter: blur(10px);: This is the most critical attribute. It does not blur the element itself, but rather the context below it. Attention, it needs to be-webkit-Prefixes to support old versions of browsers. -
background: rgba(255, 255, 255, 0.2);: The background must be a transparent RGBA or HSLA colour. Transparency is usually best between 0.1 and 0.4. - A delicate white border: Add a very fine one to the element(s) 1px) and very low transparency white border, which simulates the refraction of the edge of glass, is the key detail distinguishing between “cheap translucent” and “high-level gross glass”.
The Advantage of this Generator
Manually debug these parameters often require repeated refreshing of the browser. This tool provides:
- Visual sliders: Real-time adjustments to ambiguity, transparency and colour, as seen.
- Scene simulation: The many popular gradients and floating decorations are embedded to ensure that you can decipher the perfect visual effect in a variety of complex settings.
- Production level code: Automatically completes the browser compatibility prefix and optimizes the code structure to allow reproduction to be used directly in the production environment.