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.

32 Comments

  1. Casey says:

    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.

  2. Przemek says:

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

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

    • Βασίλειος says:

      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.

  4. RT says:

    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.

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

  6. 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.

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

  8. Del says:

    Great looking effect Chris!

  9. Dreb says:

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

  10. Osho Garg says:

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

    I am also writing CSS3 tutorials Too :)

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

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

  13. Ryan Bradley says:

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

  14. patrick says:

    CSS3 is awesome! Thanks for the tip.

  15. kevin says:

    awesome! thanks Chris!

  16. ramkumar says:

    nice chris…

  17. Mrinal says:

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

  18. mak says:

    good..

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

    Thx

  19. khushbu Jes says:

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

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

    really awesome work dear, cheers ;)

  21. Ramnath says:

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

Sorry, comments are now closed