Sites To Use Collection Of Useful Web Apps, Web Sites and Web Startups

December 12, 2011

Add Shadow Effect To Your Images Using CSS

Filed under: Service — Tags: , — Rahul @ 12:15 pm

CSS is a nice tool which lets you design your entire website or even a single web page, you can add lots of effects on your web pages using CSS, you can choose different text styles, different styles for your images and other stuffs which you gonna place on your web page.

CSS is very flexible and it can be used in almost any type of web page, if you want to put shadow effect on your images then you can use ThemeShock CSS3 Code generator, which allows add a drop down shadow to your image and get its code so that you can use it on your website or blog.

All you have to do is select the effect and then it will types its code which you can copy once you are done, effects can be added for Bottom, sides, Top & Bottom, Bottom Left, Bottom Right, Top Right & Bottom Left, and Top Left & Bottom Right.


The site does not allows you to upload your own image and work on it, it has an pre-defined image with size of 130-137px, if you had an image bigger or smaller than this size then you can edit later on.

You can add lots of effect on your image like blur, opacity for each selectors, Each selector has its different level of blur and opacity so each time you select new selector you can adjust blur and opacity level according to your needs.

Once you are done set the image width and height using horizontal bar, once you are done with coding just copy the CSS code and paste it on your CSS file, and the copy HTML code and paste it on your webpage and add image code like (img src””) where it says Your Code Here.

It provides an auto set frame of 5PX which you can remove by editing code but if you edit it then shadow will be hide or may be reveal so edit it carefully.

Visit Site :- ThemeShock Image Shadow

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress