Skip to main content
↰Posts

Smooth Gradients

Linear gradients can be finicky and difficult to get right. More often than not, you'll end up with banding or muddy middles where two colors mix. So, here's a little Tailwind utility to smooth things out.

Based on Andreas Larsen's Easing Gradients tool, the snippet below adds a .via-smooth class you can use alongside linear gradients for smooth ease-in-out transitions, as an alternative to manually fiddling with color stops and positions.

globals.css
Update – 4/12/2026
If you want a full Tailwind plugin with more options, check out ibelick/easing-gradients.

Examples

Linear gradients can have abrupt shifts or muddy middles where the two hues meet. You can see this in the first example: note how the orange-ish transitional middle occupies the majority of the space relative to the stop colors.

Adding via-smooth packs more color to the center of the gradient while still keeping the transition perceptually even.

Example 1
Linear (default)
Eased (via-smooth)

Even if you manipulate the color stops on a basic linear gradient, you can still end up with banding, like in the example below. To fix this, you'd likely need to add an intermediate color stop with via-[color] or via-[percentage] to smooth things out. And your mileage may vary depending on the difference in intensity and lightness of the colors.

Example 2
Linear (from-20% to-80%)
Eased (via-smooth)

The difference is more apparent when transitioning from transparent to opaque, like with image overlays. You can try to fiddle with various via-[%] via-[color] combinations to get it right, or just use via-smooth.

Image overlay
Aditi Bhanushali ∙ Unsplash
Linear
Aditi Bhanushali ∙ Unsplash
+ via-smooth

Usage

Just drop the snippet into your theme file. The class overrides Tailwind's default linear --tw-gradient-stops variable with fifteen intermediate stops that follow an approximate ease-in-out curve. If you want a different curve, you can swap the percentages with new ones from Easing Gradients.

Since the class only overrides the one variable, it works with different gradient angles and with any to-* / from-*positions, using a touch of ✨ math ✨ to scale the curve proportionally within your range.

When to use it

  • Hero scrims and image overlays that should feather naturally
  • Any place you'd normally sprinkle manual via-[color]/[pct] stops
  • Accent-to-accent gradients that would otherwise grey out (if using srgb interpolation)