A web app for applying customizable gradient map filters to photos.

Overview

I made a web app that lets users apply customizable filters to their photos using a gradient map, similar to the adjustment layer in Photoshop. You can try the app here and check out the GitHub repo for this project here.

What is a gradient map?

A gradient map is used to map the colors in an image to the colors of a given gradient according to their brightness. Taking a black to white gradient as an example, the darker parts of the image are mapped to dark grey and black, while the lighter parts of the image are mapped to light grey and white. This turns your image into a greyscale image!

Numerous digital art programs have this functionality, including Photoshop, Clip Studio Paint and Procreate. Gradient maps are great for changing the mood and atmosphere of a photo. You can also use gradient maps to create cool duotone effects!

If you want to learn more about gradient maps, check out this guide!

Using the app

To upload your own image to apply a filter to, click on the “Choose file” button and pick an image.

The web app includes 4 default gradients which can be freely customized. Switch between these 4 gradients by clicking on the gradient swatches at the top of the screen. To change a color in the gradient, click on the color swatch above the gradient bar and choose a new color using the color picker.

To add or remove a color from the gradient, click on the buttons “Add Color” or “Remove Color”. Colors are added and removed starting from the rightmost color. Note that the minimum number of colors is 2.

If the filter feels to vibrant or sharp, you can tone down the effect by reducing the opacity of the gradient map. You can do so by adjusting the opacity slider above the “Add Color” and “Remove Color” buttons. I personally recommend lowering the opacity to around 0.3 for a more natural effect.

Once you’re satisfied with the end result, click “Download Image” to download your new image!

Final thoughts

Surprisingly, trying to make this app user-friendly was harder than actually implementing the filter. Most people unfamiliar with photo-editing or digital art probably don’t know what gradient maps are, so making my app as accessible and easy to understand as possible was a challenge. I’m really glad I didn’t give up though - I think the end result is pretty cool!