Pixel Gradients
In BrowserThe 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.
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 —
What it does:
- Takes your pixel art, which obviously each pixel is a solid pixel
- Upscales it so each "pixel" is now a larger square (depending on the scale slider)
- Replaces that solid square with a gradient
What to do
- Load your image by drag-n-drop or clicking the load button
- Play with the sliders
- Right click the "output" image canvas to copy or save
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!