Liquid Glass UI 2026 — CSS @property Morphing Cards, Zero JavaScript

Source: Dev.to

Liquid glass morphing cards (CSS‑only)

• Built with pure CSS – zero JavaScript required.
• Uses CSS @property to animate conic‑gradient spinning borders.
• Hover shine effect driven by custom properties --shine-x and --shine-y.
• Applies backdrop-filter for refraction depth.
• Adds grain overlay via SVG feTurbulence.
• Features staggered sparkline bars for visual flair.

All of these effects are achieved solely with CSS.