If a picture is worth a thousand words, then blending at least two images must be worth far more. Moreover, a web developer's capabilities are truly revealed when various tools and conditions are available—like CSS blend modes. It may seem like working with CSS code is only for front-end developers, while designers just need to make things beautiful in Photoshop. But in reality, things aren’t quite so simple—sometimes a front-end developer becomes a designer, or vice versa.
When talking about blend modes in CSS, many people instantly feel intimidated… again. But the point is that all the fuss is really about just a few (three, to be exact) CSS properties that are now supported by modern browsers.
These are:
And by the way, they only work in the latest versions of browsers—and even then, not in all of them.
It's easy to see that the background-blend-mode property is the most widely supported, so we’ll focus on it and how it can be used to create stunning, beautiful backgrounds for websites. If anyone ever says that CSS can compete with Photoshop in some ways—believe them.
Gradients
Gradients are one of the most common types of backgrounds for web pages, so let’s give them special attention. In CSS, the background property works with functions like repeating-radial-gradient(), radial-gradient(), linear-gradient(), repeating-linear-gradient(). All of these are well supported in browsers, though it’s never a bad idea to double-check.
The background property can combine multiple gradients that overlap one another, with each function separated by a comma. A great example is a variety of backgrounds made up of tiles, zigzags, triangles, stars, etc. Each sample comes with CSS code you can use or modify—simply swap the colors if needed.
Now, take the next property — background-blend-mode — gradients and backgrounds can become even more visually impressive.
Triad
Let's try blending three colors so that they transition smoothly into each other. Each color is defined by name rather than hex code.
Now, consider that a JPG image with a similar gradient could weigh up to 200KB or more. But this CSS effect takes no more than 200KB—and avoids extra HTTP requests altogether.
Grids
Suppose a simple color gradient is boring and we want to create a pattern. Something simple, like intersecting colored stripes—where their intersections produce new shades. The result would look like this:
Confetti
Not everyone loves rigid squares—especially before a festive holiday. With some imagination and color choice, we can create confetti, or dots, or… whatever suits your style.
Liked those examples? Here's another great collection of similar backgrounds with CSS code.
Photo Effects
As we mentioned earlier, working with gradients and simple drawings via CSS is common for many developers. But it gets more interesting when we try to replicate complex Photoshop effects involving filters, layers, and blending.
The idea is that background-image can work with both gradients and images, provided a URL is known. Now add filter and background-blend-mode properties, and you’ve got a pretty unique combo.
Night Vision
One simple but stylish effect is night vision. It’s used in web design for various “toned” looks, but the core idea is recoloring everything in a single hue. Usually, that’s green, but other shades are possible. We'll do this using only CSS—no JavaScript, WebGL, HTML5 canvas, or Photoshop. And we’ll use just a few CSS properties.
The effect is built in three layers, combined using overlay (Photoshop's blend mode). Overlay is a hybrid of screen and multiply, so the background darkens and brightens simultaneously.
First, we set a background.
Now we add a radial gradient and the background-blend-mode property. The gradient fades from transparent to black.
Technically the effect is ready, but why not add realism? Night vision devices scan the area, so horizontal lines can enhance the effect. Here’s the result:
CSS is Multifaceted
As you can see, CSS allows for all kinds of effects—shifts, borders, color transitions, tints, and more. This saves time compared to manually processing graphics. Especially when only small edits are needed and there's no time to recall detailed settings from months ago. With CSS, you can build visuals using just a few properties.
Technically, color blending uses math operations on image pixels. That’s right—underneath all this creativity is math! Yes, the same math we wrote about before. You don’t need to memorize formulas to use blend modes—but you should at least understand how color mixing works.
Growing the Toolkit
There are 15 blend modes recommended by the W3C. We also talked separately about blending modes in Photoshop and how to use them. But that was Photoshop—now we’re interested in CSS. So here are some cool examples: a vintage washout effect, a 3D stereo effect, and vignetting.
Also, check out Bennett Feely’s large collection of CSS photo effects.
If You Have Browser Issues
Clearly, Photoshop knowledge helps understand image rendering in CSS. But not all browser versions can process such effects. Try opening these in Edge—you’ll likely see nothing, regardless of how convenient the browser is. However, background-blend-mode works great in Opera, Chrome, and Firefox. It works mostly well in Safari too, except for modes like luminosity, color, hue, saturation.
If you’re not sure your audience uses modern browsers, these visual effects might cause usability issues. Ask yourself: are you okay losing users due to unsupported effects? If not, consider fallbacks. Always test browser support for CSS effects—using @supports may be a smart move.
Let’s look at a pencil sketch example. The tiger photo has many dark areas, so the sketch also turned out quite dark. As with Photoshop, you may need to adjust the base image or CSS settings. Here we rely on two key properties: background-blend-mode and filter. And if they aren’t supported—or @supports fails—the user will just see the regular image.
Despite all these limitations, CSS blend modes are a powerful addition to any designer or developer's toolkit. We can add transparency, rich colors, and even texture processing with CSS—quickly and flexibly. And it’s hard not to smile when you see it work in a browser and realize your effort paid off.
Final Thoughts
If you hear someone say CSS can create photo effects and even rival Photoshop in some areas—don’t be surprised. We’ve just shown that in action. Of course, CSS can’t fully replace Photoshop—and it’s not meant to. But for small effects, CSS is often a better, lighter solution than creating a heavy JPG.
Patterns, textures, and gradients deserve special attention. Sometimes it's easier to design them in Photoshop—but if you already know the colors and parameters, why not replicate them with CSS? That said, here’s one important point we haven’t touched on yet: color rendering in browsers. It varies. Even if each browser uses the same math, visual output may differ.
Color management is complex. W3C recommends the default color profile sRGB, but browser support is inconsistent. Chrome shows images in unmanaged color space unless tagged. Firefox is similar but has a config toggle for sRGB. Safari, thanks to Apple’s PostScript-based APIs, behaves more like Photoshop. The difference is visible in the screenshot above.
Add to that human perception—everyone sees color differently. Test your work on real devices. Hardware limitations (e.g., low RAM) can affect rendering. Some blend modes can slow down scrolling. If you want that smooth 60fps, this could affect your decision to use CSS instead of images.