7 CSS Image Effects For Making Awesome Vintage Photos
Tags: css, photo, filters, vintage
Published: 2020-06-06 18:03:17

ORIGINAL SOURCE: [CSS Image Effects](http://www.coding-dude.com/wp/css/css-image-effects/)

In this short CSS tutorial I will show you how to create some really cool and easy CSS image effects that you can apply to any online image. The image effects I will show you are the most common photo effects that photographers use when developing a photo.

The CSS image effects I will demonstrate are:

1. Old Paper Overlay
2. Black and White
3. Sepia
4. Warm Colors
5. Cold Colors
6. Green Tint
7. Magenta Tint

Though you can use tools like Photoshop, Lightroom or online tools like MockoFun and their awesome [vintage photo editor](https://www.mockofun.com/tutorials/vintage-photo-editor/) to edit your photos, if you only need to place an image in a web page and apply a filter, here’s how to create cool CSS image effects.

CSS Image Effects using CSS filter
The filter CSS property is a very useful tool when you need to make image adjustments like adjusting the contrast, brightness, saturation etc of images in a web page.

Here’s a list of values that you can use with filter in CSS:

- `blur` for adding blur to images
- `brightness` for making the image brighter or darker
- `contrast` adjust the contrast of an image
- `drop-shadow` use as an alternative to box-shadow
- `grayscale` for transforming your image to gray scale
- `hue-rotate` adjust hue values for your photo
- `invert` inverts the colors of the image
- `opacity` alter the transparency of the image
- `saturate` alter the saturation values of your image
- `sepia` apply a sepia effect to the image

These CSS filters take in values (either percent or pixels in the case of blur for example). Also, you can apply combinations of these filters to the same image element (or any other HTML element for that matter).

So, let’s see the CSS filter property in action!

# Starting Image

![CSS Image Effects](http://www.coding-dude.com/wp/wp-content/uploads/2020/05/ouDwClz1.jpg)

Let’s apply some cool CSS image effects on it using various values of the filter property.

To create a more vintage effect we’ll also use this [old texture](https://www.photoshopsupply.com/patterns-textures/vintage-paper-textures) from Vintage Paper Textures free pack by [PhotoshopSupply](https://www.photoshopsupply.com/). You can also check out this [old paper background](http://www.psd-dude.com/tutorials/resources/beautiful-old-paper-textures.aspx) collection of over 150 different vintage textures or this huge collection of [free textures](http://www.textures4photoshop.com/).

![Old Paper Texture](https://i.imgur.com/4rKVgAQ.png)

# CSS Image Effects: Vintage Overlay
![CSS Image Effects](http://www.coding-dude.com/wp/wp-content/uploads/2020/05/css-image-effect-overlay-1.jpg)

## HTML Code:

```html
<div class="old-paper">
<img class="original-image" src="https://i.imgur.com/ouDwClz.jpg" />
<div class="overlay">
<img src="https://i.imgur.com/4rKVgAQ.png">
</div>
</div>
```

## CSS Code:

```css
.old-paper{
  position:relative;
  max-width:850px;
}

.original-image{
  width:100%;
  height:100%;
  display:inline-block;
}
.overlay{
  mix-blend-mode:multiply;
  position:absolute;
  display:inline-block;
  left:0;
  top:0;
  right:0;
  bottom:0;
}

.overlay img{
  width:100%;
  height:100%;
}
```

# CSS Image Effects: Black and White

![CSS Image Effects](http://www.coding-dude.com/wp/wp-content/uploads/2020/05/css-image-effect-overlay-2.jpg)

## HTML Code:

```html
<div class="old-paper">
    <img class="original-image black-and-white" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>
```

##CSS Code:

```css
.black-and-white{
  filter:brightness(70%) contrast(150%) saturate(0%) brightness(150%);
}
```
# CSS Image Effects: Sepia

![CSS Image Effects](http://www.coding-dude.com/wp/wp-content/uploads/2020/05/css-image-effect-overlay-3.jpg)

## HTML Code:

```html
<div class="old-paper">
    <img class="original-image sepia" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>
```
## CSS Code:

```html
.sepia{
  filter:filter:saturate(0%) sepia(100%) contrast(150%) saturate(150%);
}
```

# CSS Image Effects: Warm Colors

![CSS Image Effects](http://www.coding-dude.com/wp/wp-content/uploads/2020/05/css-image-effect-overlay-4.jpg)

## HTML Code:

```html
<div class="old-paper">
    <img class="original-image warm" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>
```

## CSS Code:

```css
.sepia{
  filter: sepia(50%) contrast(150%) saturate(200%) brightness(100%) hue-rotate(-15deg);
}
```

**NOTE:** `hue-rotate` shifts the hue of all the colors in the image. But why is the value in degrees?

Imagine the color wheel (actually, don’t imagine it, here it is)

![Hue rotate CSS](http://www.coding-dude.com/wp/wp-content/uploads/2020/05/color-wheel.jpg)

Using `hue-rotate` you can push one color by x degrees on the color wheel. 360 degrees will make a complete rotation, which will mean no change at all. The value for this property also works in the negatives and -90 for example is the equivalent of 270.

# CSS Image Effects: Cold Colors

![CSS Image Effects](http://www.coding-dude.com/wp/wp-content/uploads/2020/05/css-image-effect-overlay-5.jpg)

## HTML Code:

```html
<div class="old-paper">
    <img class="original-image cold" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>
```


## CSS Code:

```css
.cold{
  filter: hue-rotate(180deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(180deg);
}
```

# CSS Image Effects: Green Color Tint

![CSS Image Effects](http://www.coding-dude.com/wp/wp-content/uploads/2020/05/css-image-effect-overlay-6.jpg)

## HTML Code:

```html
<div class="old-paper">
    <img class="original-image tint-green" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>
```

## CSS Code:

```css
.tint-green{
  filter: hue-rotate(-30deg) sepia(75%) contrast(150%) saturate(300%) hue-rotate(30deg);
}
```

# CSS Image Effects: Magenta Color Tint

![CSS Image Effects](http://www.coding-dude.com/wp/wp-content/uploads/2020/05/css-image-effect-overlay-7.jpg)

## HTML Code:

```html
<div class="old-paper">
    <img class="original-image tint-magenta" src="https://i.imgur.com/ouDwClz.jpg" />
    <div class="overlay">
      <img src="https://i.imgur.com/4rKVgAQ.png">
    </div>
</div>
```

## CSS Code:

```css
.tint-magenta{
  filter: hue-rotate(-270deg) sepia(55%) contrast(150%) saturate(300%) hue-rotate(270deg);
}
```

>NOTE: One disadvantage of using images with CSS effects is that Google does not see the image with the applied effect. For the purpose of this tutorial, the images below are screenshots of the CSS image effects applied to the original image. They are NOT the live CSS effect. If you want to see or play around with the live effects please check this CodePen:

{%codepen https://codepen.io/inegoita/pen/bGVXqam %}

# Credits

[Old Texture](https://www.photoshopsupply.com/patterns-textures/vintage-paper-textures) image provided by [PhotoshopSupply.com](https://www.photoshopsupply.com/)