.jpg)
A translucent panel floats above a colourful photograph. Its edges catch the light. Colours drift through its surface, while the background softens just enough to make the controls feel separate.
There is no actual glass on the screen. Yet the design makes you imagine how it would feel.
That is the appeal of glass-inspired interfaces: they give flat pixels a sense of material, depth and movement. For designers, they also introduce a challenge. The same transparency that makes a surface beautiful can make its contents difficult to read.
So, what makes this aesthetic work—and how can you use it without letting the effect overwhelm the experience?
Why Glass Is Getting Attention
Apple introduced Liquid Glass in June 2025 as a translucent material that reflects and refracts its surroundings and adapts to content and context. It brought this approach across its platforms, giving controls and navigation a shared material character.
The wider interest extends beyond Apple. Canva’s 2026 design trends report places glassy, translucent and hyper-realistic surfaces within its “Texture Check” trend. It connects this direction with a growing appetite for digital visuals that suggest physical materials.
For a designer, that offers an interesting creative opportunity. A surface can communicate more than its outline and colour. A frosted panel suggests softness. A sharp highlight suggests a polished edge. A hint of background colour makes an overlay feel connected to the image beneath it.
The effect becomes compelling when those details support the composition, rather than competing for attention.
Liquid Glass Is More Than a Transparent Card
It is tempting to recreate the look by lowering a card’s opacity, adding blur and rounding its corners. That can produce a glass-inspired graphic, but Apple’s Liquid Glass has a more specific role.
Apple’s design guidance positions it as a distinct layer for controls and navigation above the content. It explicitly advises against using Liquid Glass throughout the content layer, where it can make the visual hierarchy confusing.
This distinction is useful even when you are designing a website, a presentation or a promotional visual. Before adding transparency, decide what the surface is supposed to do.
A floating control can benefit from feeling separate from the image beneath it. A long paragraph usually benefits from a quieter, more consistent background. Giving both the same treatment can weaken that distinction.
Where the Effect Works Best
As a practical starting point, try glass-inspired styling on a small, clearly defined part of your composition. A compact navigation bar, a short overlay label or a restrained control panel gives you room to explore the material without placing every piece of information on a changing background.
Imagine a portfolio with a large project photograph. A subtle translucent navigation bar could maintain a visual connection with the image while keeping the controls distinct. Covering the same photograph with several overlapping glass panels would create a much busier result.
The question to ask is simple: does the effect help people understand the layers of the design?
If it makes an important element easier to locate, it has a purpose. If it makes everything look equally decorative, reduce it.
The Background Becomes Part of Your Palette
With a solid panel, you largely control the colour behind your text. With a translucent panel, the image underneath contributes to the surface people see.
A pale blue tint over a warm photograph will look different from the same tint over a dark landscape. Even within one image, a bright highlight can change how a panel appears.
This makes the background a useful starting point for colour selection. Instead of choosing an unrelated accent, sample a few colours from the image you intend to use. You might choose a muted blue for an icon, a warm tone for a decorative detail and a dark neutral to explore elsewhere in the layout.
Treat those sampled colours as ingredients. They still need defined roles, and a colour that looks attractive in a photograph may need adjustment before it works in an interface.
Readability Has to Survive the Effect
A glass-inspired design should remain readable beyond the particular screenshot that made it look impressive.
WCAG 2.2’s Level AA text contrast criterion generally requires a ratio of at least 4.5:1 for normal text and 3:1 for large text, with defined exceptions. For translucent surfaces, the background behind the text needs particular attention because its appearance can change with the underlying content.
Test your composition over the lightest, darkest and busiest areas that might appear beneath it. For an interface, check relevant scrolling positions and states as well. White text that works over a dark photograph may become difficult to distinguish when a bright area moves behind it.
If readability suffers, increase the panel’s opacity, adjust its tint, simplify the background or move the text onto a more stable surface. Blur can soften detail, but it does not automatically provide sufficient contrast.
Apple also supports accessibility preferences that reduce transparency and increase contrast in Liquid Glass interfaces. Those alternatives reinforce a useful design principle: the visual treatment should accommodate the person using it.
Start Your Glass-Inspired Palette with DF Tools
Before you build your next translucent panel, take a closer look at the image behind it. Which colours give it character? Which could become subtle accents in your design?
The DF Tools Image Color Picker – HEX Detector lets you select a point in an image and copy its HEX colour code. Use those values as a starting point for your palette, then refine them in your design tool and check the finished composition for readability.
Working in your browser? Try the DF Tools Image Color Picker.
Prefer to work on your phone? Get our Image Color Picker app on Google Play.
Start with an image you love, choose its colours deliberately, and give every transparent layer a reason to be there.
.jpg)
.jpg)
.jpg)
.jpg)
