Add Drop Shadow Effect To Your Pictures Online
As you might have noticed, adding the drop shadow effect to pictures and screenshots make them look a lot nicer on a website.
Here is a screenshot of my blog without the drop shadow effect:
And here is a screenshot with the effect:
How do you add the effect to your pictures and screenshots though? Most photo editing software can do it, but the process it not trivial, so you’ll need to spend some time learning and applying it every time.
If you want something faster and easier to use there is a online tool called dropshadowz.net. You just need to upload your picture and within 10 seconds you’ll be able to download it with the drop shadow effect added. Definitely worth a bookmark.
23 Responses to “Add Drop Shadow Effect To Your Pictures Online”
Lucy @ VideoCharacter
I use Photoshop for adding Drop shadows but the tool makes it faster especially if we are in a hurry. Thanks for the link Daniel! 😉
Mir Imran Elahi
Thanks Daniel for sharing this tool
Excellent I’ll be downloading that later. I wondered how you achieved that and yes looks really cool. Many thanks
Working fine for me. Good share. I need this feature badly as my blog is all about picture and photography.
HP van Duuren
Yeah, that’s a great idea it adds a little more depth to it,
although currently I hardly ever use photo’s on my Blogs yet.
I know there are lot’s of places where you can buy – or get Photo’s, only currently – even on my Digital Camera-ideas Blog – I hardly ever place photo’s. I am however working on building my own – Stock Photo Catalogue – and already have hundreds of photo’s in several catagories, I also have a special web-address where I have some of my photo’s published.
Thanks for your post, it’s something to keep in mind it might actually be an interesting idea to share with my Digital Camera-ideas Blog readers….,
All the Best,
To your Happy – Blogging – Inspiration,
Good tip! I uploaded some pics and gives a “deeper” look of your pics.
Sean M Kelly
To be honest I can’t see any difference!
Sean M Kelly
The Irish Inspirational Blogger
It can also be done with CSS. Add a class to your theme and then you can add it to any photo, but also be able to add it to divs and other block level elements.
/* Add the Shadow */
-moz-box-shadow: 4px 4px 4px #505050;
-webkit-box-shadow: 4px 4px 4px #505050;
I prefer this way, using CSS rather than editing the image. Because when you get bored with the drop shadow style, you can just remove the CSS.
Previously I just confuse whether to border the image or not to border the image. But this post bring better idea, drop shadow 🙂
Thanks for you trick, anyway, can you tell me how to move the shadow effect to the top and left position, instead of right and bottom.
I think my reply got marked as spam. Here’s the short version…
Change the first 2 “4px” to “-4px”, it’s that simple.
Thanks bro.. It worked
- Bali Homeland
Took me a minute to figure this one out also. I was looking for a shadow inside the screen shot not of the screen shot itself. I use Snaggit and there is a drop shadow feature there. Never really thought about this though.
Hi Daniel Scocco,
Before commenting to this article, i must tell you first that i have become a big fan of your blog since the day i read one of your blog post called Blog Post Checklist.
That article has blown me away, and i’ve also learn something from that article, and the lesson is, it only takes 1 article for a person to love a blog. Wow. Hope i can make such a brilliant post like yours for my blog in the future.
Anyway, Drop Shadow Effect has become one of the most important thing every time i insert picture to my blog. I usually used the image editing feature from Microsoft Power Point (the 2007 version), as it offers great feature to modernize the look for our posted image in the article.
But, i’ll also give it a try for your recommendation.
This is a very good and effective online tool indeed. But if you are a blogger, you can use a much simpler solution.
Windows Live Writer is a blogging software, developed only for a bloggers. Allows you to do so much necessary things, including to add shadows to your images (+ much more other effects and borders) automatically.
But, if you are not a blogger – this tool can be useful for you!
Well not everyone uses Windows 🙂 .
lol you’re right 🙂
- Bash Bosh
- Daniel Scocco
Oh, duh! Now I see it… the whole webpage has the effect. Going for another cup of coffee now. Ha!
Being truthful I can’t tell the difference between the two images you share. Both seem to called “dbt5?”
But I am a huge fan of the drop shadow… use it on just about every image I use. I actually use Snagit editor as I can quickly resize, add the effect, and save. But it’s not free!
Dinesh @ DailyBlogMoney
Thats a good share.
When we use wordpress admin panel to publish a post somewhere with different computer, this online tool will be helpful.
The link is working fine here too.
Find All Answers
Strange that the link goes to Google either when clicked directly or if I copy paste the address to the address bar.
Interesting thing though.
It will be great if you could fix the link Daniel.
It’s working fine here. Are you sure it’s not your browser?
It redirects to Google for me too on Firefox, Chrome is fine…
- Daniel Scocco
Comments are closed.