How To Edit Images in CSS: Combining Techniques

In last two tutorials of this series, we have discussed how filters and blend modes can completely change the appearance of images. In this tutorial, I will cover the basics of editing images by using both these properties together.

How To Edit Images in CSS: Basics of Layering Image Effects

Any non-primitive image editing usually requires more than just a single element. This can be accomplished with pseudo-elements. Unfortunately, there is one more complication. The img element comes under replaced elements. As a result, :before and :after won't work with image tags. To resolve this issue, we will need a wrapper around our image, and the figure tag seems the best candidate in this case. Therefore, our markup should look like this:

1	<figure>
2	<img src="image-url">
3	</figure>

All the editing effects that we'll add to our images in CSS will have some common core CSS.

figure {
  position: relative;
}

figure:before,
figure:after {
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

I've used the :before and :after pseudo-elements so that I can apply various blend modes. Notice that I've set the width and height to 100% to cover the figure properly, and I've used absolute positioning for perfect alignment.

In most of the cases, we'll be applying the filters on images in CSS and using blend modes and other effects on the pseudo-elements. Keep reading because we'll edit some images in CSS.

Original Image — This is the original photo we'll be working with. Let's start editing the CSS image properties!

Adding High-Contrast Grayscale in CSS to Images

To add high-contrast in CSS to your images, you can just set the contrast to a higher value, but increasing the brightness makes the effect more dramatic. If you were to just use filters, then that's all you could do. However, with blend modes you can also add an inset box-shadow with overlay blending to the image for better results. Here's an example of the CSS image properties:

img {
  filter: contrast(1.8) brightness(1.5) grayscale(1);
}

figure:before {
  z-index: 3;
  mix-blend-mode: overlay;
  box-shadow: 0 0 200px black inset;
}

Adding a z-index keeps our pseudo elements above the CSS image properties. I've used the overlay blend mode to keep the images in CSS slightly dark after application of the box-shadow.

Try hovering over the image below to see the difference between filters and a combo of filters and blend modes. Check out the CSS image properties and remember to hover over the images to see the effects in action!

For practice, you may try out different values for the box-shadow property in the CodePen demo.

Giving Images in CSS an Older Look

Color in most old photos generally fades away, and they have a reddish-brown outer lining. To give the same effect in CSS to your images, we'll have to use more elements and filters. Here's our CSS image properties:

img {
  filter: saturate(0.6);
}

figure {
  filter: contrast(1.1) saturate(1.9) sepia(0.7) grayscale(0.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: color;
  box-shadow: 0 0 250px brown inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 150px pink inset;
  background: rgba(198, 155, 0, 0.3);
}

This time, I have applied filters on both the image as well as the figure. Basically, we want to edit the image in CSS to be less colorful. This is achieved by using the saturate filter with a value lower than 1. The figure filters are applied after all the blending. If you don't apply these filters, the final result will have much more prominent shades of brown, which is undesirable.

You should note that I've also applied a semi-transparent reddish background on both the pseudo elements. This gives the images in CSS have a reddish-brown look. The box-shadow is used to keep the outline comparatively more brown.

Here's our CSS image properties for this:

You should experiment with various properties in the demo to see if you can get better results.

Adding a Specific Hue to Images in CSS

This time we'll try to give a blue hue to our image in CSS. Compared to warm colors, adding a shade of cool colors like blue makes images easy on our eyes.

This is the CSS that we need to apply:

img {
  filter: brightness(1.1) contrast(1.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(100, 150, 200, 1) inset, 0 0 300px rgba(100, 150, 200, 1) inset;
}

figure:after {
  z-index: 3;
  mix-blend-mode: difference;
  background: rgba(0, 0, 255, 0.3);
}

I begin by increasing the brightness and contrast of our images in CSS. This will make sure that our image does not lose less prominent colors and become too dull during the editing.

You generally have to use multiple box-shadows with lighter colors for noticeable changes. That's why I add two bluish box-shadows to our images in CSS. Just using a box-shadow restricts the blue shade to the boundary of our image. To spread the blue color all over our image, I use it as background on the :after pseudo element. Here's how the final result looks in the CSS image properties:

Try adding a green or red hue to the image in the demo.

Edit Images in CSS: Add a Yellowish Haze

Have you ever witnessed a slightly cloudy evening with sand particles suspended in the atmosphere because of the wind? In those weather conditions, everything has a yellowish hue, and objects seem to be a little dull. To recreate the same effect, we need to add the following CSS to the image properties:

img {
  filter: saturate(0.2);
}

figure {
  filter: contrast(1.8) brightness(1.1) saturate(1.5);
}

figure:before {
  z-index: 2;
  mix-blend-mode: hue;
  background: red;
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 500px rgba(35, 35, 35, 0.6) inset;
  background: rgba(255, 200, 0, 0.5);
}

The first thing that I do is reduce the image saturation. Both the :before and :after pseudo elements have translucent yellowish backgrounds to add the desired hue. Using the hard-light blend mode on :after makes the haze more prominent.

The box-shadow on pseudo elements increases the focus on the biker. Finally, applying high contrast, brightness and saturation filters to our figure element reinforces the haze.

In the demo, you may try out different values for various properties to see how they affect the final result.

CSS Images With Colorful Gradient Overlay

There are a lot of ways to edit images in CSS with powerful gradient functions. You can also use CSS to create all kinds of color combinations for backgrounds. Try combining them with some blend modes and placing them over any image to create some truly unique and awesome effects. I'll use simple conic gradients as an example here:

img {
  filter: grayscale(1);
}

figure {
  filter: contrast(1.8) brightness(1.1) saturate(1.5);
}

figure:before {
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0.4;
  background: conic-gradient(from 90deg, red, orange, yellow, green, blue, red);
}

We have used only the :before pseudo-element here and applied a conic gradient over it. The opacity is set to 0.4 so that the background colors visible but they don't hide the features of the original image. The colors of the original image are taken out by applying a grayscale filter over it. Here is the final result embedded in a CodePen demo for you to experiment:

Final Thoughts

It's not that hard to edit images in CSS. If you keep the points I discussed in this tutorial in mind, you will be able to create some amazing filters of your own. The important thing to remember is that experimentation is key. A specific set of CSS rules will not look good on all images. This tutorial was meant to give you some ideas of how to get started with editing images in CSS.

For practice, you can experiment with the demos in this tutorial or try to recreate popular Instagram filters. You can also check out the variety of animations and effects available in the Envato Marketplace in case you need some ready-to-use filters.

Editorial Note: This post has been updated with contributions from Gonzalo Angulo. Gonzalo is a staff writer with Envato Tuts+.