How to Fade an Image in Photoshop Easily

How to Fade an Image in Photoshop Easily

How to fade an image in Photoshop? Fading an image in Photoshop can be done in a couple of ways. First, using the gradient tool and the other is by eraser tool.

Let’s add the image into a single document. The photo image is the one we are going to fade out and the other element is a background color (It can also be an image) where it stays below the image layer.

Fade an image using the gradient tool

We can use the gradient tool by changing its gradient color. This is the perfect tool to get an even fading effect into any areas of the image.

Since we are going to create the fading effect into nondestructive technique, we are going to use the layer mask instead.

Step 1. Select the image layer. Resize, make it smaller or as desired.

Step 2. Add a layer mask by hitting the icon below the layer’s panel.


Layer Mask Icon

Using the mask, we can have the control over the mistake on erasing if ever it’s going to happen. Erasing it directly into the image layer will remove our chance of editing our image back from its original composition.

The mask just means we are using the foreground color black on our brush. The black color means to remove. If ever you have erased something just replace the black color into the white one (#ffffff) and brush it over to the image so parts will start to appear.

Read also:

Try to use your brush into the image and you will see how it works.

How Layer Mask Works

Step 4. Next, select the gradient tool.

For its colors, choose the black into a transparent gradient. This is important because we are using a layer mask.

Gradient Editor

Step 5. At the bottom edge of the image, you can start masking.

Click and drag up using the gradient tool by holding the shift key.

Fade an Image using layer mask

Make sure to select the layer mask thumbnail.

Layer Mask Thumbnail

How to fade an image in Photoshop using the eraser tool

This technique gives us more freedom on the fading effect.

Step 1. First, we should set our brush into a smooth brush.

Smooth brush so it will not show clear edges upon the fade effect.

Smooth Brush Tool

Step 3. Next, make sure the foreground color is set to black or #0000 color code.

Foreground Color

Step 2. Second, we lower our brush flow enough that we can see our desired output fade effect.

The flow option can be found in the top menu after you select the eraser tool.

Put your desired flow value, for this, I am going to use 40%.

Step 3. Use larger brush size so you will get even fading effect with the image

Step 4. Start brushing into the bottom of image areas or wherever you desire.

I have added some texts into the composition and this is what I came up to:

How to Fade an Image in Photoshop Easily
How to Fade an Image in Photoshop Easily
The pink panther image source: Pixabay

Background Image Color Overlay | Create a Filter Look with CSS


To add a color overlay to the background image, I am going to use CSS.

First of all, adding a CSS background image color overlay is the most dynamic way of creating tinted web page images. It became popular to many websites which appear in homepage as banners.



The great thing about adding background image color overlay is that you can just change any image (normal image without filter) dynamically and publish it on your website with filter, thanks to CSS.

So, how to do it?

Watch the video or continue reading.

See also:

Add a background property

(Yes not a background-image or background-color).

Within the background property, I add a linear gradient and a URL to the image.  I am using a linear-gradient background with transparency.

  1. background:
  2.    linear-gradient(
  3.    rgba (255, 255, 255, 0.5),
  4.    rgba (255, 255, 255, 0.5)
  5.    ),
  6.    url(image.jpg)

In one CSS property, I need to set two backgrounds. The first one is the linear-gradient color and the second is the actual image.

Because I need to add transparency for the background color opacity, I will define RGBA inside the linear gradient.


  1. linear-gradient(
  2.    rgba (255, 255, 255, 0.5),
  3.    rgba (255, 255, 255, 0.5)
  4.    );

The RGBA is an RGB color with an alpha channel. The alpha channel must be set between 0.0 to 1.0. It is the last parameter of the RGBA. The RGBA parameters are composed of red, green, blue, alpha.

Example: rgba (255, 255, 255, 0.5)

How to choose and get a color?

To make it easier for you to choose the color, create your web page document copying the code from here. Open it in the browser.

Developer tool in your browser is your friend. Right-click and inspect your web page (or CTRL+SHIFT+I).

On your div with the background style, click on the colored square or circle and a color picker will appear. Choose your color by dragging into the palette.


Change the opacity of the color you’ve picked, that is important so we can mimic the overlay or color filter effect in photoshop with our background image.

You can also use CSS Gradient Generator from sites like colorzillacssmatic, or cssportal.

See the jsfiddle:

Use the background-blend-mode

Are you familiar with Photoshop blend modes?

Well, I can also blend our background but with CSS.

I can also use the linear-gradient without the transparency and add a background-blend-mode: soft-light;

The CSS code should look like this:

  1. .block {
  2.  height: 350px;
  3.  background: linear-gradient(yellow, yellow), url(image.jpg);
  4.  background-size: cover;
  5.  text-align: center;
  6.  background-blend-mode: soft-light;
  7. }

As a result, the image and the color blended together in soft-light. Unlike the other way in which I can adjust the opacity.

You can experiment by adding different value into the background-blend-mode property.

background-blend-mode values include:

  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • saturation
  • color
  • luminosity

CSS Background image color overlay in hover

Add a background image color overlay if the user hovers over the image.

In conclusion, adding the color filter effect can be done in two ways. The first is through a background property with the linear gradient and image url.

The other is to add a solid color within the parameter of linear-gradient and add the background-blend-mode property.

Creating a Hero Image with color filter overlay on hover

Hero image is a large website banner image. It is composed of the background image, texts and even a button.

Learn how to create your hero image with CSS background image color overlay by watching the video below:

You can use either of the two techniques to add the effect into your CSS background image.