Hi all, I noticed that “FROSTED GLASS EFFECT” is used for menus in Sparkle.
…like the one where you can put a personalized pattern in a box…
How can I make this effect in Sparkle ?
While that is a system feature, there is a way to do something similar in browsers. We added support for it way back in Sparkle 3, and at the time Firefox was very close to adding support. Turns out Firefox still hasn’t added support, so while you can use the feature, it’s not going to work everywhere identically.
The feature is the “background filter” in boxes, and it essentially applies the filter to content behind the box, so the box itself can’t be solid color or have a solid image. Combining this with the lacking Firefox support, the best combination is something like a plain white (or black) background fill, an opacity set to say 80% (this will work in Firefox), and then a combination of filters to give the frosted glass effect, so perhaps a little blurring and a little desaturation.
The only other detail is that it’s pointless unless there’s content scrolling under the box, so it’s best when used in a stick-to-top group.
Example:
2 Likes
