unocss-preset-easing-gradient ​

Beautiful, perceptually smooth gradients.

Create natural-looking gradients that transition evenly across colors using easing functions instead of linear interpolation.

  • npm
  • Downloads
  • License

Features ​

  • 🎭 Easing Functions

    Natural transitions using ease, ease-in-out, and more

  • 🖌️ Multiple Shapes

    Linear, radial, conic, and elliptical gradients

  • 🎨 Color Spaces

    Control interpolation with oklch, srgb, and other color spaces

  • ⚡ Animatable Gradients

    Smooth animations with @property CSS features

  • 🎛️ Fine-Tune Controls

    Custom steps, bezier curves, and detailed positioning

Why Easing Gradients? ​

Traditional CSS gradients create uniform color transitions that often appear unnatural to the human eye. Easing gradients use mathematical functions to create non-linear color interpolation that better matches human perception.

Standard Linear Gradient

Notice how the color appears to band in the middle section

Easing Gradient

The eased transition creates a more natural perception of the gradient