CSS Photo Retrofier

Hipsters love photo filters right? Well now you can get your hipster on with nothing but CSS (Provided you are using a webkit browser, at least). Choose a photo and play with the sliders below to create your own photo filters!

Choose a Photo

All images come from The Big Picture. It's pretty awesome, you should check it out.

Add Filters

  • Contrast 100%
  • Brightness 100%
  • Grayscale 0%
  • Saturate 100%
  • Hue-Rotate 0°
  • Sepia 0%
  • Invert 0%
  • Blur* 0px

*This is not the out of the box blur effect. I used several layers of photos to create a soft focus blur effect.

Reset Filters

The Code


            

More on -webkit-filter


developer.mozilla.org/en-US/docs/Web/CSS/filter