Replicate The Tilt-Shift Effect - tiltShift

File Size: 625 KB
Views Total: 853
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Replicate The Tilt-Shift Effect - tiltShift

tiltShift is a jQuery plugin that replicates the tilt-shift effect using CSS3 image filters.

How to use it:

1. Include necessary elements in <head> section

<link rel="stylesheet" href="jquery.tiltShift.css">

<script src=""></script>
<script src="jquery.tiltShift.js"></script>

2. Call the plugin

jQuery(document).ready(function() {

3. Markup

<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">

4. Options


  • -position (0-100), defines the point of focus. 66 would be two thirds of the way in.
  • -blur (0-?), the blur radius in pixels. 1 or 2 are usually good numbers.
  • -focus (0-100), the amount of area that is in focus. 10 would mean one tenth of the image is sharp.
  • -falloff (0-100), the amount of area between complete focus and complete blur. The lower the value, the “tighter” the fade.
  • -direction (“x”, “y”, or 0-360), the direction of the effect with zero at right.


This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.