Realistic

jQuery Shadows Plugin

Add more real shadows effect to your website with our jQuery plugin.
You can easily include it into your design just like any other jQuery plugin.
It’s very easy to customize.

icon
Simple Integration
icon
Easy to use
icon
Easy to customize
icon
Light & Fast

Watch the magic

Here you can see what Realistic plugin will make with your images.

image
image
image
image
image
image
image
image
image

You are an artist

Let's see how easy it is to use Realistic plugin to get great shadow effects.

image

Getting Started

Less than 60 second all you need to start using Realistic plugin.

Set up your HTML markup.

image

Add realistic.js before your closing body tag, after jQuery.js

image

Initialize your images in your script file or an inline script tag

image

When complete, your HTML should look something like:

image

Settings

Setting name

:

width

Type

:

Int

Attribute

:

data-rs-width=" "

Default

:

400px

Setting name

:

blur

Type

:

Int

Attribute

:

data-rs-blur=" "

Default

:

30px

Setting name

:

scaleX

Type

:

Int

Attribute

:

data-rs-scale-x=" "

Default

:

.8

Setting name

:

bottom

Type

:

Int

Attribute

:

data-rs-bottom=" "

Default

:

30px

Setting name

:

left

Type

:

Int

Attribute

:

data-rs-left=" "

Default

:

0%

Setting name

:

opacity

Type

:

Int

Attribute

:

data-rs-opacity=" "

Default

:

.6

Setting name

:

borderRadius

Type

:

Int

Attribute

:

data-rs-border-radius=" "

Default

:

80px