# Avoid Gradient Banding

**SHOULD** · **ID:** `performance-gradient-banding` · **Category:** performance
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/performance-gradient-banding

> 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

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.

## Rule snippet

```tsx
.glow { background: radial-gradient(circle, oklch(0.7 0.2 250 / 0.5), transparent 70%); }
```

## Bad — do not do this

`performance-gradient-banding-bad`

```tsx
export function GradientBandingBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="relative h-32 rounded-lg overflow-hidden">
          <div className="absolute inset-0 bg-primary/80" style={{ filter: 'blur(40px)', transform: 'scale(1.5)' }} />
          <div className="relative z-10 flex items-center justify-center h-full">
            <span className="text-sm font-medium text-primary-foreground">Hero Section</span>
          </div>
        </div>
        <pre className="text-xs bg-muted rounded p-2 mt-3 text-foreground overflow-x-auto"><code>{`background: solid color
filter: blur(40px)
transform: scale(1.5)`}</code></pre>
      </div>
      <p className="text-xs text-error">Scaling + blurring solid rectangle — visible color banding</p>
    </div>
  );
}
```

## Good — do this

`performance-gradient-banding-good`

```tsx
export function GradientBandingGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="relative h-32 rounded-lg overflow-hidden">
          <div className="absolute inset-0 bg-gradient-radial from-primary/60 via-primary/30 to-transparent" style={{ background: 'radial-gradient(ellipse at center, hsl(var(--primary) / 0.6), hsl(var(--primary) / 0.3) 50%, transparent)' }} />
          <div className="relative z-10 flex items-center justify-center h-full">
            <span className="text-sm font-medium text-foreground">Hero Section</span>
          </div>
        </div>
        <pre className="text-xs bg-muted rounded p-2 mt-3 text-foreground overflow-x-auto"><code>{`background: radial-gradient(...)
/* No blur or scale needed */`}</code></pre>
      </div>
      <p className="text-xs text-success">Radial gradient — smooth colors, no banding artifacts</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)