PROFILPELAJAR.COM

Draft:Glassmorphism

Glassmorphism
BranchUser interface design, web design
Years active2020–present
Major figuresMichał Malewicz, Microsoft, Apple Inc.
InfluencesSkeuomorphism, Flat design, Neumorphism
InfluencedClaymorphism

Glassmorphism is a user interface (UI) design trend characterized by a translucent, "frosted glass" appearance. It relies on a visual stack of background blur, multi-layered surfaces, and subtle light borders to simulate physical depth and establish a visual hierarchy within graphical user interfaces.

While the aesthetic became a distinct, named trend in late 2020, its technical foundations are rooted in early desktop compositing window managers. It has since been formalized into major modern design systems, including Microsoft's Fluent Design System, Apple's visionOS, and Apple's cross-platform Liquid Glass design language.

History and origins

Precursors (2007–2013)

The conceptual origin of utilizing simulated glass in user interfaces dates back to the mid-2000s. In 2007, Microsoft introduced Windows Aero in Windows Vista, which featured transparent, hardware-accelerated window borders mimicking reflective glass. In 2013, Apple introduced iOS 7, which abandoned skeuomorphic textures in favor of flat design elements but heavily utilized real-time Gaussian blurring on panels (such as the Control Center) to imply depth. However, these early iterations differed from modern glassmorphism, as they either heavily relied on skeuomorphic specular reflections or lacked the distinct layered structural layouts seen in later styles.

Coining and resurgence (2020–present)

The term glassmorphism—a portmanteau of glass and skeuomorphism—was popularized in November 2020 by UI designer Michał Malewicz.[1] The trend gained rapid traction across digital design communities such as Figma, Dribbble, and Behance following the release of macOS Big Sur in late 2020, which heavily integrated translucent sidebar panels and control menus.

The aesthetic saw further mainstream adoption as major technology companies integrated translucent materials into their proprietary design systems:

  • Microsoft: Microsoft codified the style within its Fluent Design System, introducing the transient "Acrylic" material in Windows 10 (2017) and the more performant, opaque "Mica" material in Windows 11 (2021).[2]
  • Apple: In 2024, the release of Apple's visionOS spatial computing operating system relied heavily on glassmorphic windows to blend digital interface components natively into a user's physical, real-world surroundings. In 2025, Apple further cemented the style by announcing Liquid Glass at the Worldwide Developers Conference (WWDC)—a unified design language introduced in iOS 26 and macOS Tahoe that utilizes dynamic, refracting translucent materials across all of its platforms.[3]

Visual characteristics

According to Michał Malewicz's original 2020 definition, the glassmorphic aesthetic is defined by four core visual pillars:[1]

  • Translucency: Sub-surface layers use a frosted glass effect (typically achieved with a white or light fill between 10% and 30% opacity) to allow background colors and shapes to show through.
  • Background blur: A high-radius blur (often Gaussian) is applied directly to the elements behind the translucent surface. This distortion prevents the background details from interfering with the legibility of the text or icons placed on top.
  • Subtle borders: A thin, semi-transparent white stroke or border is applied to the outer edges of the shape to simulate the physical thickness and edge-refraction of real glass, separating the object from surrounding layers.
  • Vivid backgrounds: The visual effect is highly dependent on being placed over vibrant, contrasting backdrops—such as colorful gradients or dynamic wallpapers—which accentuate the refraction and "frosted" properties of the material.

Technical implementation

In web development, the widespread adoption of glassmorphism was accelerated by native web browser support for advanced Cascading Style Sheets (CSS) graphical filters. Specifically, the style is achieved using the backdrop-filter property combined with alpha channel transparencies (rgba).

A standard web implementation typically adheres to the following structure: 

.glass-panel {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
Comparison of UI material trends
Feature Neumorphism Glassmorphism Claymorphism
Material metaphor Extruded plastic or embossed paper Frosted glass or acrylic sheet 3D clay, vinyl, or inflatable plastic
Relationship to background Extruded directly out of the background surface Floats detached over the background Floats as a distinct, solid 3D object
Lighting and shadows Requires paired light and dark drop shadows Subtle drop shadows; relies on edge borders Deep outer shadows with dramatic inner shadows
Opacity Fully opaque; matches background color Semi-transparent Fully opaque; uses vibrant pastel colors

Criticism and accessibility

Glassmorphism has faced significant criticism from digital accessibility advocates and user experience researchers. In a 2024 analysis, the Nielsen Norman Group noted that while the style effectively establishes visual hierarchy, its overuse can pose severe usability challenges.[4] Key accessibility concerns regarding compliance with the Web Content Accessibility Guidelines (WCAG) include:[5]

  • Contrast issues: Because the appearance of a glassmorphic panel depends entirely on the background beneath it, text legibility can fluctuate wildly. If a user scrolls a glass panel over a bright or busy portion of an image, the text-to-background contrast ratio can drop below acceptable readability standards.
  • Spatial confusion: Overuse of multiple overlapping translucent layers can confuse users with visual or cognitive impairments regarding which UI element is currently active or in the foreground.

To combat these issues, modern operating systems that utilize glassmorphism include accessibility toggle switches within their system settings (such as "Reduce Transparency") to automatically convert glass elements into solid, high-contrast flat shapes. The heavy reliance on translucency in Apple's 2025 Liquid Glass update, for instance, prompted the company to introduce a dedicated switch in iOS 26.1 to drastically reduce the refractive effects following user feedback regarding readability.

See also

References

  1. ^ a b Malewicz, Michał (November 20, 2020). "Glassmorphism in user interfaces". UX Collective.
  2. ^ "Acrylic material - Windows apps". Microsoft Learn.
  3. ^ "Adopting Liquid Glass". Apple Developer Documentation. June 9, 2025.
  4. ^ Brown, Megan (June 7, 2024). "Glassmorphism: Definition and Best Practices". Nielsen Norman Group.
  5. ^ "Web Content Accessibility Guidelines (WCAG) 2.2". W3C World Wide Web Consortium.

Category:User interface techniques Category:Web design Category:2020s in computing

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.