Glassmorphism

Glassmorphism is a visual interface style that reproduces the look of frosted glass: transparency, background blur and thin glowing borders create a sense of depth and layering between surfaces. It is one of the major trends in contemporary UI design, alongside neumorphism and flat design.

Where does glassmorphism come from?

The style owes its popularity to its adoption in native interfaces by major operating systems, where floating navigation bars and panels use background blur to stay readable while hinting at the content underneath. The term itself spread through the design community around 2020, notably through Figma kits that made the effect easy to reproduce.

How do you create a glassmorphism effect?

Technically, the effect relies on a few combined properties:

• a semi-transparent background, usually white or light with low opacity
• a blur applied to the background visible through the element
• a thin border, often white or slightly glowing, to accentuate the edges
• a soft shadow to reinforce the floating impression

On the web, this translates into CSS properties like backdrop blur and transparent colors, which can be composed directly in a tool like Webflow or through Custom Code for finer rendering.

What is the difference with neumorphism?

Neumorphism relies on soft shadows and minimal contrast to make an element look sculpted out of the background material, at the risk of harming accessibility. Glassmorphism, instead, relies on transparency and visual separation between layers, which generally makes it more readable and better suited to content-rich interfaces.

What are the best practices for using it?

Glassmorphism works best when used sparingly, on specific elements like a card, menu or modal window, rather than across an entire interface. It requires sufficient contrast between text and background to stay readable, a key concern in web accessibility. Used well, it fits naturally into a coherent design system, alongside other visual design tokens.