Ask Dave Taylor
  • Facebook
  • Instagram
  • Linkedin
  • Pinterest
  • Twitter
  • YouTube
  • Home
  • YouTube Videos
  • Top Categories
  • Subscribe via Email
  • Ask A Question
  • Meet Dave
  • Home
  • HTML & Web Page Design
  • Add a Drop Shadow to Images on my Web Pages?

Add a Drop Shadow to Images on my Web Pages?

April 11, 2020 / Dave Taylor / HTML & Web Page Design / No Comments

I was visiting another blogger’s site and noticed that all her photos and images have a subtle drop shadow. It’s really beautiful. How can I duplicate this functionality on my own site, and maybe even add a border around my images too?

Modern Web browsers work with a lot more than just old-school HTML (hypertext markup language), notably including something called Cascading Style Sheets or “CSS”. CSS is so prevalent that you’d probably have to really dig around to find a site that’s just HTML without any CSS styling applied. The best way to think about this is that HTML is the rough sketch and CSS is the fine tuning that gets things to be exactly as you want. More space between lines? Slightly different colors for your embedded links? Different behavior on having the cursor hover over an element? All of that is easily accomplished in CSS.

And when you get to images and photographs, CSS has an astonishing number of different features and capabilities! The easiest one to work with is borders, actually. For example, here’s an photo I took after I experimentally grilled up both a burger and tater tots on my BBQ:

burger and tots bbq grill plated

Nice enough and yes, it was quite tasty, including the BBQ’d tots!

But let’s look at how the photo is presented more closely. It’s… kind of boring. The HTML for this image is similar to:

<img src="burger-and-tots.jpg" alt="burger and tots bbq grill plated" 
 width="400" height="322" />

You can actually add CSS directly to an individual HTML element by using the style=”” attribute. To add a grey border I can simply specify style=”border:5px solid grey;” like this:

<img src="burger-and-tots.jpg" style="border:25px solid black;" 
 alt="burger and tots bbq grill plated" width="400" height="322" />

With this result:

burger and tots bbq grill plated

The basic attributes for a CSS border specification are size style color, so 25px solid grey gives us a solid grey border that’s 25 pixels wide. There are lots of different ways you can specify these attributes, actually, something that’s beyond the scope of this tutorial. You can even specify border-left and border-right, for example, and have them be different sizes, colors and styles. I commonly use 1px solid black to add a slim “pencil line” around images so that they stand out from the background but rarely do more than that.

DROP SHADOWS IN CSS

Which now brings us to that drop shadow you asked about! By default, drop shadows in CSS use the top left as the light source, spilling that shadow “over” the lower right corner of the image. You can specify the blurriness of the shadow and the color of the shadow both. Here’s an attractive setting:

burger and tots bbq grill plated

This is done with the CSS box-shadow attribute, and it’s a bit more complicated than the border attribute we discussed earlier. The reason is that there are four different characteristics you can specify: right-shadow-offset bottom-shadow-offset blur-offset color.

In the above I’m using style=”box-shadow: 10px 10px 10px black”. But let’s tweak this just a bit by pulling the shadow out more and using a lighter color rather than black. For the latter, the hexadecimal color specifier #999 is going to give us a middle grey:

burger and tots bbq grill plated

I think that’s much more attractive, though you should be seeing the text here sort of superimposed on the shadow. This brings up a really important concept: CSS works in display layers and the box shadow is underneath the image and text. Use a really big offset and the shadow can literally end up underneath your text. Like in this smaller version of the image with a big drop shadow offset:

burger and tots bbq grill plated

Now you can really see how that shadow extends behind the text. It’s a rather weird effect because you probably want the page to automatically compensate for the bounding rectangle of the shadow too. Nope. So the solution is to be a bit more subtle with your shadows and have them tightly adjacent to the image itself.

Here’s a standard pair of CSS attributes I like to add to photographs I include in Web pages:

style="border: 1px solid black; box-shadow: 5px 5px 5px #999"

That gives me both a skinny black line around my image and a subtle drop shadow. Like this:

burger and tots bbq grill plated

Nice, isn’t it? Now, a quick variant before we wrap up…

ROUNDING CORNERS WITH BORDER RADIUS

There’s another attribute in CSS called border-radius and you can add that if you’d like to get rid of those boring sharp edges and round off not only the image but the shadow behind it. Start with small values to see how it works, then have fun changing the feel of your photos entirely. Oh, and don’t forget that you can change your shadow color to anything you’d like too, like pink!

Put this all together and here’s a subtle border, unsubtle drop shadow and corners rounded by 25px:

burger and tots bbq grill plated
Cool! How did I accomplish this? By changing the style= attribute in the IMG SRC HTML to this:

style="box-shadow: 15px 15px 10px #BBF; border-radius: 25px; border: 8px solid #EEE;".

Whether you want to go wild or keep it simple, now you know some of the basics about how to use CSS to improve the appearance of your images. Note that while I’m showing how to do this inline within a single line of HTML  you could also specify it once at the top of a page for all images on that page or even in a shared CSS style sheet if you want.

Pro Tip: I’ve been writing about HTML and CSS for quite a long time. Heck I’ve written books on both subjects (Creating Cool Web Pages with HTML and Creating Cool Web Sites with HTML, XHTML and CSS) and I’ve also written a lot of HTML and CSS tutorials here on my site. Please, while you’re here, check out my HTML & CSS help pages for lots more fun ideas.

About the Author: Dave Taylor has been involved with the online world since the early days of the Internet. Author of over 20 technical books, he runs the popular AskDaveTaylor.com tech help site. You can also find his gadget reviews on YouTube and chat with him on Twitter as @DaveTaylor.

Let’s Stay In Touch!

Never miss a single article, review or tutorial here on AskDaveTaylor, sign up for my fun weekly newsletter!
Name: 
Your email address:*
Please enter all required fields
Correct invalid entries
No spam, ever. Promise. Powered by FeedBlitz
Please choose a color:
Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!
cool css tricks, css border, css border shadow, css drop shadow, fun with css, photo drop shadow

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search

Recent Posts

  • How to Connect to Hilton Hotel Wi-Fi with a Mac
  • How to Filter and Organize Additional Email Addresses in Gmail
  • How Can I Customize my Android Phone Shortcuts Screen?
  • What Is The Importance Of A Strong Password?
  • An Introduction to the New Microsoft Windows Copilot AI Sidebar

On Our YouTube Channel

Catalyst Cases Apple AirPods Pro 1st/2nd Gen Waterproof Case -- REVIEW

Kensington Pro Fit Ergo TB450 Trackball -- REVIEW

Categories

  • AdSense, AdWords, and PPC Help (106)
  • Alexa, Kindle, and Nook Help (103)
  • Amazon, eBay, and Online Shopping Help (166)
  • Android Help (241)
  • Apple iPad Help (151)
  • Apple Watch & Smartwatch Help (56)
  • Articles, Tutorials, and Reviews (347)
  • Auto Tech Help (21)
  • Business Advice (201)
  • Chromebook & ChromeOS Help (47)
  • Computer & Internet Basics (797)
  • d) None of the Above (166)
  • Facebook Help (386)
  • Google, Chrome & Gmail Help (198)
  • HTML & Web Page Design (248)
  • Instagram & Threads Help (53)
  • iPhone & iOS Help (642)
  • iPod & MP3 Player Help (173)
  • LinkedIn Help (90)
  • Linux Help (178)
  • Linux Shell Script Programming (90)
  • Mac & MacOS Help (933)
  • Most Popular (16)
  • Outlook & Office 365 Help (41)
  • PayPal Help (68)
  • Pinterest Help (54)
  • Reddit Help (21)
  • SEO & Marketing (82)
  • Spam, Scams & Security (102)
  • Trade Show News & Updates (23)
  • Twitter Help (225)
  • Video Game Tips (66)
  • Web Site Traffic Tips (62)
  • Windows PC Help (979)
  • Wordpress Help (206)
  • Writing and Publishing (72)
  • YouTube Help (47)
  • YouTube Video Reviews (159)
  • Zoom, Skype & Video Chat Help (66)

Archives

Social Connections:

Ask Dave Taylor


Follow Me on Pinterest
Follow me on Twitter
Follow me on LinkedIn
Follow me on Instagram


AskDaveTaylor on Facebook



microsoft insider mvp


This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to our terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. Our lawyer says "Thanks for your cooperation."
© 2023 by Dave Taylor. "Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.
Privacy Policy - Terms and Conditions - Accessibility Policy
x
x