Create a Trendy Retro Photo Effect Purely with CSS

Home » Tutorials » Create a Trendy Retro Photo Effect Purely with CSS

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

I’ve done plenty of retro photo effect tutorials in the past, but they’ve all been done using Photoshop. After playing around with some cool new CSS3 features I managed to create a pretty decent looking retro style image effect using just CSS. With the help of CSS gradients and filters, let’s take a look at how a cool vintage photo effect can be created directly in the browser.

CSS retro photo effect

This little technique uses a mix of CSS gradients and filters to combine various colour overlays to create that typical old school analogue photo effect. Currently CSS filters only work in Webkit browsers (Safari, Chrome), but it won’t be long until this fun little tip can be put into practice across all browsers.

How to create a retro CSS photo effect

<div class="retro">
	<img src="images/retrofy-me.jpg" alt="Retro is cool!" />
</div>

In order to create a retro photo effect, we first need a photo. Add an image to a HTML file as you usually would. Some of the CSS effects rely on a block element container, so the image will have to be within a <div> or <p>.

.retro {
	-webkit-box-shadow:  inset 0px 0px 100px rgba(0,0,20,1);
	background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
	display: table;
}

.retro img { 
	-webkit-filter: sepia(20%) brightness(10%) contrast(130%);
	position: relative; z-index: -1; 
}

In the CSS add the above code to instantly create a cool retro effect on any image. Seeing as CSS filters currently only work in Webkit browsers, the other vendor prefixes have been omitted to keep the example clean and tidy. Don’t forget to add standard and -moz- variants of each CSS rule if you want to future-proof your work.

How it works

The CSS begins with a box-shadow rule using the values inset 0px 0px 100px rgba(0,0,20,1);. This creates a dark blue inner glow effect to simulate a vignette. The problem is this box shadow appears below the image and spans across the full page. To fix this position: relative; z-index: -1; is added to the image to send it down a level, while display: table; collapses the div to fit the image dimensions.

Next, the first of two background gradients is added to the parent div. -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%) creates a vertical gradient flowing from orange to yellow. The rgba values then allow the opacity of the colours to be reduced to allow the gradient to act as a colour overlay.

The second gradient -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%) is added to the parent div and flows from 50% to 0% red and is angled at 20° to simulate a cool light leak effect.

The effect so far works to a certain extent but leaves the image looking very flat. Thankfully we now have a bunch of CSS filters to play around with to alter the appearance of the actual image: -webkit-filter: brightness(10%) contrast(130%) sepia(20%);. The declarations are all pretty self explanatory, but the brightness property bumps up the brightness of the image (by 10%). Contrast brings the flat image back to life by darkening the dark areas and lightening the light areas. Then sepia adds a yellowy-brown tone to the image, but using just 20% helps retain some of the original colours. When all the gradients and filters combined it creates a cool looking effect almost identical to what can be created in Photoshop (if only we had blending modes such as Screen or Soft Light available!).

Author
Iggy
Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

22 thoughts on “Create a Trendy Retro Photo Effect Purely with CSS”

  1. after reading this article i don't think so that i have to use photoshop to edit my shaps ;)

    really awesome work dear, cheers ;)

    Reply
  2. For the production and maintenance of websites,many different skills and disciplines are used that develops a great website..

    Reply
  3. Nice post dear, its is very nice and helpful information for my new projects, Thanks a lot add this information dear……..

    Reply
  4. Interesting approach never even considered this before with the final results being much better then i envisaged, nice post. Thanks

    Reply
  5. Awesome! I sure have been looking for a way to make CSS3 Gradients breakout from the norm..this just opened up my imagination, I will sure play-around with this on my next web project.
    And yes..How I wish we could have some of Photoshop-like-filters…let alone support for other browsers.

    Thx Chris!

    Reply
  6. The retro effect on photo in css is awesome. By followed this blog i love to use css in Better Web Development.

    Reply
  7. Amazing! This is really cool. Very helpful. I'm going to give this a try using some image rotators and different configurations of the gradient.

    Reply
  8. This is nice Chris, hopefully we start to see support outside of webkit browsers soon enough, but I won't hold my breath! Thanks for the tutorial.

    Reply
    • I wouldn't trust code generated results when it comes to graphics, I agree.
      But see beyond that, the evolution of that thing in a couple of years.

      Reply
  9. Wow, so kick ass! I would have really never thought of using gradients in this manner, but you my man, have certainly done a fine job.

    Reply

Leave a Comment

Verified by MonsterInsights