Files

nitrix e203ecf687 Apply glassmorphism styling to event cards on list view

Replace solid white event cards with glass-effect cards featuring
backdrop blur, semi-transparent gradient backgrounds, and light
borders that blend with the Electric Dusk gradient background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-09 17:50:20 +01:00

2.2 KiB

Raw Blame History

Modern UI Effects Research (2025-2026)

Liquid Glass (Apple WWDC 2025)

Evolved glassmorphism with directional lighting. Three-layer approach: highlight, shadow, illumination.

backdrop-filter: blur(20px) saturate(1.5) — higher saturation than basic glass
inset 0 1px 0 rgba(255,255,255,0.15) — top highlight (light direction)
inset 0 -1px 0 rgba(0,0,0,0.1) — bottom shadow
Outer drop shadow for depth: 0 8px 32px rgba(0,0,0,0.3)
Advanced: SVG feTurbulence + feSpecularLighting for refraction (Chromium only)
Browser support: backdrop-filter ~88%, Firefox since v103

Aurora / Gradient Mesh Backgrounds

Stacked animated radial gradients simulating northern lights. Pairs well with glass cards on dark backgrounds.

Multiple radial-gradient(ellipse ...) layers with partial opacity
Animated via background-position shift (GPU-friendly)
@property rule enables direct gradient color animation (broad support since 2024)
Best for ambient background movement, not for content areas

Animated Glow Borders

Rotating conic-gradient borders with blur halo. Striking on dark backgrounds.

Outer wrapper with conic-gradient(from var(--angle), color1, color2, color3, color1)
::before pseudo with filter: blur(12px) and opacity: 0.5 for glow halo
@property --angle trick to animate custom property inside conic-gradient
Use sparingly — best for single highlight elements (FAB, CTA), not all cards

Modern Neumorphism (2025-2026 revision)

Subtler than the original trend. Higher contrast, less extreme extrusion, combined with accent colors.

Light and dark shadow pair: 6px 6px 12px rgba(0,0,0,0.5) + -6px -6px 12px rgba(60,50,80,0.15)
border: 1px solid rgba(255,255,255,0.05) for definition
Works on dark backgrounds with slightly lighter "uplift" shadow direction
Better suited for interactive elements (buttons, toggles) than content cards

Sources

Apple Liquid Glass CSS: dev.to/gruszdev, dev.to/kevinbism, css-tricks.com, kube.io
Aurora: dev.to/oobleck, daltonwalsh.com, github.com/mattnewdavid
Glow borders: frontendmasters.com (Kevin Powell), docode.co.in
Trends overview: medium.com/design-bootcamp, index.dev, bighuman.com

2.2 KiB Raw Blame History