Line25

Create a Trendy Retro Photo Effect Purely with CSS

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

October 17, 2012

Line25 is reader supported. At no cost to you an affiliate commission may be earned when a purchase is made through various links on our 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 effectPin

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

Pin

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.

Pin

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.

Pin

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.

Pin

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

Written by 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 Comments

Would you like to say something?

  1. Web Design North East says:

    Some great results there using css. I’ll have to experiment myself.

    Many thanks

    Paul

  2. Ramnath says:

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

  3. web development says:

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

    really awesome work dear, cheers ;)

  4. khushbu Jes says:

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

  5. mak says:

    good..

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

    Thx

  6. ramkumar says:

    nice chris…

  7. kevin says:

    awesome! thanks Chris!

  8. patrick says:

    CSS3 is awesome! Thanks for the tip.

  9. Ryan Bradley says:

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

  10. animation company in mohali says:

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

  11. web design newcastle says:

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

  12. 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 :)

  13. Dreb says:

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

  14. Del says:

    Great looking effect Chris!

  15. Emmanuel Wacha says:

    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!

  16. Better Web Development says:

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

  17. Jared Serfozo says:

    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.

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

  19. Przemek says:

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

  20. Marto @411 Brand says:

    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.

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

Please Share