- Docs
- Guides
Guide
Liquid glass
Liquid glass is Opaline’s signature: translucent, blurred panels with light edges, laid over photography.
- 1Two panels side by side
- 2Heading and link on each panel
- 3Round glass button
Where you will find it#
The header on scroll, the mega menu, the quick view panel and the card buttons, the product thumbnails, the promotional popup, the footer panel, and many sections: Colorways, Stacked chapters, Duo panel, Editorial grid, Product mosaic, Closing statement, Statement with images, Testimonials, Timeline and Scrolling text.
Sections where you can switch it#
| Section | Setting |
|---|---|
| Header | Frosted glass effect (liquid glass) |
| Editorial grid | Liquid glass effect (labels + chips) |
| Product mosaic | Liquid glass effect (promo block), with Panel shape and text colors |
| Footer | Glass tone, Glass tint and Glass blur |
| Age verifier | Frosted glass effect |
| Image / video banner | Background behind text: glass box, with Glass opacity and Glass blur |
Elsewhere the glass is part of the design: what you control is the photograph behind it and the text color on top.
Getting a clean effect#
- Glass needs something to blur. Photographs with depth and color read best; a flat, near-white image gives the effect nothing to work with.
- Check the text against the photograph, not against the panel: a light photograph needs dark text, a dark one light text.
- Panels that carry text use a denser glass, so prices and options stay readable on any background.
Good to know
Visitors who ask their device to reduce transparency see solid panels instead of glass, automatically.