Viewed: 5495

Creating vintage filters with CSS blend modes

Code in about 2 minutes

With blend modes we can apply a vintage style to any image like we would in Photoshop. Blend modes is something I have been looking forward to coming to CSS for a while and this feels like a fitting way for me to share a deeper look at them.

Decision making for choosing a filter

There are many blend modes and some of them serve better for applying the effect we’re going for.

Modes that tend to be best

  • overlay
  • soft-light
  • lighten
  • screen

Modes with varying success

  • exclusion
  • multiply

Choosing a suitable colour

Suitable colours tend to be shades of blue, purple, yellow and green. Each colour will be more effective depending on the blend mode, this is a matter of trial and error for the most part. Adjusting the blend mode and opacity to achieve desirable results.

How to apply blend modes

Blend modes can be applied in two ways, using background-blend-mode and mix-blend-mode. I’ll be focusing on mix-blend-mode due to the flexibility it has over background-blend-mode as it can only be applied to elements with a background. However should it be a better fit for you it’s not difficult to adjust the code.


I’m working on the basis that we will be applying it over an image. We’ll wrap our image in a <div> as it’s not possible to use :before and :after on <img>.

<div class="blend blend-yellow">
  <img src="…">


The CSS is fairly simple, just cover the the image with an empty pseudo element.

.blend {
  position: relative; }

.blend:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

.blend-yellow:before {
  mix-blend-mode: multiply;
  background-color: #f1ef98;
  opacity: .5; }

Try out the demo

See the Pen Vintage blend mode creator by Steve (@stevemckinney) on CodePen.

Finishing thoughts and other ideas

I’ve found this a handy little experiment to create. You can experiment further with using colours :before and :after. You can create some interesting vintage effects. You could also combine a colour and add textures. They would all work great in combination.

If you found this article useful or it’s saved you time, I would be grateful for your support.

Next to read

Using scale-color in Sass

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner, every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.