Pixel Gradients

In Browser

Version 0.1

Last Update: March 23, 2026

The Pixel Art Gradients tool was created just for fun with no specific use-case. It was more of an imagining of what real-life pixel art looks like, for example, pixel art made from shiny tiles with light reflecting across them.

graphic showing different examples of pixel art with gradients as pixels
Pixel Gradient Examples

Upload pixel art and apply per-pixel gradients. Adjust hue, saturation, value shifts, gradient direction, and pixel spacing.

Drag & drop a pixel art image here

— or —

Output

What it does:

What to do

Hue/Value/Saturation Sliders

These sliders represent how much of hue, value, and saturation is added to one side of the gradient and subtracted from the other side of the gradient.

If they are all set to zero, it will be a solid color, as both sides of the gradient will be the same. So smaller the values, the more subtle the change.

Typically, I do small positive Hue, small negative saturation, and larger positive value. But obviously play around with it - which is why they are sliders so it is to experiment - until you find something cool!

Like What You See?

Join my mailing list so I can tell you when my next game is on Steam!

Lou Bagel Logo

Follow the Bagel