Add Drop Shadow Effect To Your Pictures Online

By Daniel Scocco

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.



Share

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

  • Toby

    Excellent I’ll be downloading that later. I wondered how you achieved that and yes looks really cool. Many thanks

  • Umesh

    Working fine for me. Good share. I need this feature badly as my blog is all about picture and photography.

    Thanks.

  • 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,
    HP

  • Dailybits

    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

  • Jason

    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.

    .shadow-right {

    /* Add the Shadow */
    -moz-box-shadow: 4px 4px 4px #505050;
    -webkit-box-shadow: 4px 4px 4px #505050;

    margin-right: 8px;
    margin-bottom: 6px;
    padding: 0px;

    }

    • Bali Homeland

      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 πŸ™‚

    • Daniel Likin

      Hi Jason,

      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.

      Thanks,
      Daniel Likin

      • Jason

        I think my reply got marked as spam. Here’s the short version…

        Change the first 2 “4px” to “-4px”, it’s that simple.

    • Daniel Likin

      Thanks bro.. It worked

  • Thomas

    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.

  • Daniel Likin

    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.

    Thanks.
    Daniel Likin

  • Bash Bosh

    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!

    • Daniel Scocco

      Well not everyone uses Windows πŸ™‚ .

      • Bash Bosh

        lol you’re right πŸ™‚

  • Ron Pereira

    Oh, duh! Now I see it… the whole webpage has the effect. Going for another cup of coffee now. Ha!

  • Ron Pereira

    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.

    Jane.

    • Daniel Scocco

      It’s working fine here. Are you sure it’s not your browser?

      • Matej

        It redirects to Google for me too on Firefox, Chrome is fine…

Comments are closed.