performanceRauno
Avoid Gradient Banding
SHOULD
SHOULD: Build soft glows with `radial-gradient()` rather than a filled rectangle scaled and run through `filter: blur()` — the blur+scale route bands. Where a gradient still bands, fade it with a `mask-image` gradient instead of stacking more blur.
Scaling and blurring filled rectangles causes banding — use radial gradients instead
.glow { background: radial-gradient(circle, oklch(0.7 0.2 250 / 0.5), transparent 70%); }Bad
Good
Why it matters
Applying blur() and scale() to solid-colored elements produces visible color banding artifacts. Radial gradients create smooth color transitions natively without needing blur filters, resulting in better visual quality and performance.
References