nitrix
e203ecf687
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>
38 lines
2.2 KiB
Markdown
38 lines
2.2 KiB
Markdown
# 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
|