When working on website design, a logo, an illustration, or choosing an interesting effect for a photo to be used as a background for a page or section, web designers inevitably engage in creativity. Creativity in a broad sense, because truly top-class design is achieved partly when it draws the visitor’s eye. And if you look at numerous works by some masters, you’ll notice that photographs and images in their raw, original form are used… very rarely.
This is easy to explain. Design doesn't always come with high-quality photos or the right lighting. Moreover, perfect photos aren't always thematically appropriate. Sometimes, you just want to transform a photo or image to better fit a design—adjusting its tone, brightness, sharpness, etc. In short, processing is essential, and not all web designers know how to do it beyond basic hue and brightness/saturation adjustments. But what else is there?
Another tool is blending modes. At first glance, blending modes seem useful only for creating compositions, but in fact, they can also be applied within a single image.
The Mystery of Blending Modes
Working with blending modes is almost always experimental, as it's nearly impossible to predict the results. For every image, the same blending mode gives a different result—it depends on the colors and their ratios in the original. Today, we’ll talk a bit about how blending modes interact and how they depend on color. We’ll try to avoid diving into math (though it exists and can be applied) and instead explain and show examples of how blending modes can be used and combined.
Usually, out of all the blending modes Adobe offers designers, only Multiply, Screen, Overlay, and Soft Light are used. But the magic lies elsewhere. Each brush and each individual layer also has its own blending modes, either by channels or transparency. But let’s start from the beginning—with the Layers panel and all 27 blending modes.
Here is our original image.
Swappable Modes
There are two pairs of blending modes that are considered swappable versions of each other: Overlay and Hard Light , as well as Luminosity and Color . When you apply one mode to the active layer, the result will be the same as if you applied the other mode to the lower layer and then changed the layer order.
Opacity Dependency
Some blending modes are highly dependent on how the Layer Opacity and Fill sliders are adjusted. For example, Hard Mix usually looks quite harsh, but if you fine-tune the Fill percentage of that layer, you can achieve excellent results.
In addition to Hard Mix, seven other modes are similarly dependent: Darker Color, Linear Burn, Lighter Color, Linear Dodge (Add), Vivid Light, Linear Light, and Difference.
Multiply
When you select Multiply mode, you darken the image. This option is good if the original photo is overexposed. The principle is that overlapping the same pixels from both layers multiplies their color values. Multiplying black by black results in black, and white by white remains white. These are neutral colors—they stay unchanged, but all others are affected.
Below, you can see a plate with pancakes and berries. It’s overexposed. We applied Multiply and added more layers. The result is already much better.
Screen
The Screen blending mode also multiplies pixel values, but uses the inverse. If the top layer is dark and the bottom one is light, the result becomes brighter. This mode is perfect for underexposed or simply dark images. You don’t need to invent a light source or adjust brightness/contrast manually. The whole image can be brightened just by using Screen.
Darken and Lighten Modes
Previously, we worked within a single image—adjusting its quality. But these two modes won’t show any changes if both layers contain the same image. Unfortunately!
To see them in action, you need two different images on separate layers. For the top layer with a bird, we apply Darken. This mode compares each pixel on the top layer with those on the bottom and displays the darker of the two. That’s why we get a kind of “visual mess,” but it’s illustrative. The result is a darker combination of the two images.
The Lighten mode works similarly but displays the lightest pixels from both images, combining them. This mode suits our example better. If you lightly use the eraser or brush on a mask, the composition improves.
Lighter Color, Linear Dodge, Darker Color, Linear Burn
In Photoshop, all four of these blending modes operate similarly. In each case, the pixels of the background layer are adjusted in brightness and contrast compared to the corresponding pixels of the top layer. Bright pixels from one are blended with bright pixels from the other.
When using these modes, note that dark group modes will darken the image and light group modes will brighten it—regardless of the image combination. The key question is how they do it and what they affect.
As mentioned earlier, these modes are among the eight most complex and ambiguous, so you’ll need to adjust the Opacity and Fill sliders for optimal results.
Overlay
This blending mode is probably the most popular and useful for increasing saturation and contrast. If your photo is already perfect, Overlay may create a messy mix. It's best used when both layers have the same image—you can make the colors richer. If you need to brighten, use Screen; for darkening, use Multiply. But Overlay is all about saturation. If your image is too bright, Overlay will make it even brighter. That’s why it’s unsuitable for the pancake plate image—only Multiply works there.
Hard Light
This mode works best with two different images on separate layers. It functions similarly to Multiply and Screen, but the result depends on whether the top layer has lighter or darker areas. Why use it in web design? When you need to add some highlights or shadows to a selected photo—light pixels become lighter and dark pixels darker.
Additionally, this blending mode is great for detail work. With two different images, swapping their order produces different results.
If the same image is used on both layers, Hard Light just increases contrast and darkens the composition—which isn't always ideal.
Soft Light
This mode is similar to Hard Light, but the result is softer. Both modes aim to increase color saturation and contrast in dull and lifeless images . For example, using Soft Light on a washed-out bird photo adds subtle richness. Hard Light does so more aggressively.
Difference, Exclusion, Subtract
If the previous modes were more or less clear (brightening/darkening, adding black or white), these three tend to confuse beginners. The results are often garish, and it’s hard to tell what they’re for. So let’s take a closer look.
Difference and Exclusion work similarly, but Difference produces more distinct, harsher results. Both subtract colors from each other depending on which is lighter. If you blend an image with a lighter version, it gets inverted and mixed with the black pixels, which remain unchanged.
Difference produces a more contrast-heavy result than Exclusion.
Subtract, on the other hand, literally subtracts the identical colored pixels from the top image from those on the bottom layer. Depending on the layer order, you get different outcomes.
Hue, Saturation, Luminosity
All the blending modes in this final group work on the same principle. They alter just one component of a base color—hue, saturation, or luminosity—while leaving the other two unchanged. So we have three parameters. One changes, the other two remain as is. When selecting Hue, for example, brightness and saturation stay the same.
In the example below with the pancake plate, we applied a hue mode and the image was tinted. If you swap the layers, the effect becomes even more visible and ambiguous.
A Quick Recap
In summary, blending modes serve one main purpose: to adjust the source image. However, only eight of the 27 modes are effective when the images on each layer differ. This is the most important point to remember.
But it's also fascinating that blending modes can be combined, creating mysterious and entirely new compositions. For instance, apply Screen to the bottom layer, Color to the bird image, and you get a whole new picture. Add a mask and brush over the sky—maybe you’ll get northern lights?
Or maybe turn the tundra into a lush green area? Swap the layers and use Color and Darken. And all this without playing with opacity or fill. Just layer masks—because the sky needed “cleaning.”
Thus, blending modes offer another creative and engaging way to enhance your images for website mockups. Some might say: you can just try different modes one by one, why learn where it’s darker or lighter? Sure, you can—but that takes longer. Without understanding blending principles, you can spend hours testing modes and wondering, why does this look like nonsense? Even a basic understanding will speed things up.
Brush Tool
One last interesting note: did you know the Brush tool has two additional blending modes? Behind and Clear . Behind applies paint only on transparent pixels, leaving opaque ones untouched. Clear turns the brush into an eraser, removing pixels painted on transparent areas. At first, it might seem useless, but for an infrared effect or a red highlight simulating lava—it fits perfectly.
Default Blending Mode
In each layer's settings, there are also blending options based on channels or grayscale. For example, if we want to add a basic moon—nothing fancy—using Screen or Lighten may be enough, but there’s a more detailed method.
Double-click the moon layer and a familiar window appears. At the bottom, in the “Blend If” section, drag the left slider to the right to remove the black background.
It looks unrealistic, so let’s stay in that same window and look at the “Underlying Layer” slider. This lets us hide the moon behind clouds. Use the right slider for light clouds, left for dark ones.
You can also reposition the moon if needed.
Conclusion
So, using different blending mode variations—whether via layer settings, the Layers panel, or brushes—allows you to create truly original images. Yes, realistic photos are trendy in web design. But what if your source images aren’t high-quality or lack a bit of glow, polish, or saturation?
Adjustment layers can take time to figure out, but blending modes are easier. Why? Because they’re grouped by how they alter pixels. As web designers, all we need to do is pick the right images.
And if someone says: your object in the sky is too bright —don’t worry. Try experimenting with blending modes. You might just find the perfect look.