Glassmorphism
Panels that act like frosted glass: the background blurs through them, with a thin bright edge and a soft tint on top.
See it
What it is
Glassmorphism makes surfaces behave like frosted glass: a semi-transparent panel that blurs whatever sits behind it, edged with a thin light border and usually floated over a colorful background. The web recipe is one property, backdrop-filter: blur(), plus a low-alpha background color and a 1px white-ish border to catch the 'light'. Windows Aero did it in 2007, iOS 7 brought it back in 2013, and macOS and Apple's Liquid Glass work keep it in circulation.
Reach for it for layers that sit on top of content and need to stay connected to it: nav bars, modals, sidebars, media controls, notification toasts. The blur says 'this is above the page' better than a drop shadow does, and it keeps the underlying context visible instead of hiding it.
Gotcha: glass needs something interesting behind it or it's just a grey box, and it puts text over an unpredictable background, which wrecks contrast. Fix that with a solid tint layer under the blur (roughly 60 to 80 percent opacity) rather than trusting the wallpaper. Also, backdrop-filter is genuinely expensive: large or animated glass surfaces will drop frames on cheap phones.
Ask AI for it
Style these panels as glassmorphism. Give each card background: rgba(255,255,255,0.12), backdrop-filter: blur(16px) saturate(180%), a 1px border of rgba(255,255,255,0.25), a 16px to 24px corner radius, and a soft ambient shadow underneath. Put a colorful blurred gradient or photo behind the whole layout so the blur has something to chew on. Keep text high contrast (white text on a dark background, or add a darker tint layer under the blur), and only apply the glass to overlay layers like the nav, modals, and cards, not to every element.