Line25

Create a Trendy Retro Photo Effect Purely with CSS

Read the full post

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!).

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://gridthirtyone.com Casey

    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.

  • http://webchannel.pl Przemek

    Wow, nice. I did'nt expect it is possible :)

  • http://411brand.com/ Marto @411 Brand

    Nice effect, that is easily achieved. But it's too bad that it doesn't work in all browsers.

    • Βασίλειος

      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.

  • http://www.jellyfish.net/services/creative/ RT

    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.

  • http://www.nupurwebdevelopers.com Better Web Development

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

  • http://www.accrisoft.com Jared Serfozo

    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.

  • http://blog.boroborstudio.com Emmanuel Wacha

    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!

  • http://www.webdesignerslondon.co Del

    Great looking effect Chris!

  • http://drebopedia.tumblr.com Dreb

    Keep up the CSS3 meals Chris! We're definitely learning from your recipes. :)

  • http://www.techehow.com/ Osho Garg

    Good Work Chris Keep Writing Content Like That, I Love To Read Tutorials On CSS3.

    I am also writing CSS3 tutorials Too :)

  • http://www.wayfresh.co.uk web design newcastle

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

  • http://futurworks.com/ animation company in mohali

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

  • http://www.ryanbradley.com/ Ryan Bradley

    Oh wow, looks like instagram via css. Cool trick.

  • http://patricktumalad.com patrick

    CSS3 is awesome! Thanks for the tip.

  • kevin

    awesome! thanks Chris!

  • ramkumar

    nice chris…

  • http://www.mindxstudio.com/ Mrinal

    I like this css3 shadow effect, will implement on photos of http://www.aditi4u.com/

  • mak

    good..

    Is it possible to have the same result with GIMP ?
    I'd like to know if somebody has a tutorial.. ?

    Thx

  • http://d2stechnologies.com khushbu Jes

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

  • http://webomnizz.com/blog web development

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

    really awesome work dear, cheers ;)

  • http://responsiveuidesign.com Ramnath

    Till date I do not know about this feature in CSS. You are genius. Keep it up! Thanks for sharing.