Street View Tilt Shift

I've been puzzling for a while about how to add a tilt shift effect to Google Maps Street View using CSS filters in Chrome. What has stumped me in the past was how to create a gradient blur that when applied to a Street View would add a tilt shift effect to the panoramic image.

Today I had a little eureka moment when I realized one solution would be to overlay one Street View layer on top of another Street View of the same scene. You can then use CSS filter transparency to create a masking effect. If you add this transparency filter to a horizontal band in the top Street View you can see the bottom Street View through the band.

Then all you have to do is add a CSS blur filter to the top Street View. The effect is a Street View that is blurred apart from one horizontal strip, creating a reasonable tilt shift effect. You can see the result on this Street View Tilt Shift image (you will probably only be able to see this if you view the page in the Chrome browser).

If you pan the Street View in this page only one of the Street Views will move. You could add an event listener to the top Street View so that when you move the top Street View the bottom Street View also moves. I haven't done this here so you can more clearly see how the masking effect works.

You can see other experiments using CSS filters with Google Maps Street View at Here Comes the Sun and Blurrd. Both of these pages again will probably only work in the Chrome browser.