CSS3 properties: shadows!

January 7th 2010

Here’s a new series of post in which I’ll introduce you to new CSS3 properties. You might already know about them but have you tried them? Or know how to use them? Stay tuned and be ready when we can widely use them or start right now as it degrade gracefully.

In this article, I’ll cover text-shadow and box-shadow. Both are very similar and quite easy to use. To be able to view the example, you need to use a CSS3 compatible browser.


This property will put a shadow under your text… Used wisely it can give the subtle touch that makes a design stand out. The CSS declaration should be as follow:

h1 {
text-shadow: #999 1px 1px 0px;

The four value are:

  1. Color of the shadow. Accepeted values are hex, rgb, rgba. I’ll discuss RGBA in the next article.
  2. X-Coordinate of the shadow relative to the text. A positive value will push it down, a negative value will pull it up.
  3. Y-Coordinate of the shadow relative to the text. A positive value will push it right, a negative value will pull it left.
  4. Blur of the shadow. The higher the value, the more blury the shadow. Don’t make it too high as it can make the text difficult to read. 0px or 1px is usually perfect!

Check out an example here. It should work in Firefox, Opera, Safari, WebKit, Chrome, you get it!


This property is very similar to text-shadow. It takes the same values, the only difference is that for now, you need to define it with browser specific prefix. The CSS declaration should be as follow:

#content {
  box-shadow: #000 2px 2px 15px;
  -moz-box-shadow: #000 2px 2px 15px;
  -webkit-box-shadow: #000 2px 2px 15px;

You see “-moz” and “-webkit”, those are the browser specific prefixes I was talking about. According to Michael Ventnor, the prefixes are not needed with text-shadow because they were part of CSS2.0 and got dropped in CSS2.1. Box-shadow needs the prefixes because it is part of CSS3.

Once CSS3 support will be final in the browsers the prefixes should be dropped. That’s also why I include a “box-shadow” without any prefix, for future support, this way you ensure your style will still be visible properly once the browsers drop the prefix.

Check out an example here. It should work in Firefox, Safari, WebKit, Chrome, you get it!

Bottom line

You can start using those properties right now, but make sure your design doesn’t rely on them as the properties are not widely supported yet. A browser that doesn’t support them won’t display any shadow, so it degrades gracefully.

It can be nice to start using this right now as it can make your life significantly easier, not having to play with PNGs to have shadows is a big plus and you can save some kilobytes on page sizes.

Just be careful if you start using this on clients website, I personally wouldn’t recommend it as clients often expect websites to be the same across all browsers. If your clients are open enough to let you play with this, then you’re in luck!

25 Responses to “CSS3 properties: shadows!”

  1. Josh says:

    You should have mentioned that instead of defining a hex value for the color, you can use RGBa to define something that will work everywhere. Sure, some people thing that it’s better to use a shade of the background as a shadow instead of say, black at 50%, but it can sure come in handy when you’re doing a wordpress plugin or something similar where you can’t control the background color.

  2. Stephane says:

    @Josh: You’re totally right. I planned to talk about RGBA values in mynext article but now that you point this out, it makes perfect sense.

  3. BEBEN says:

    its a cool…
    like the blur technique 😀

  4. danny says:

    Muchas gracias !!!!!!

  5. כסא מנהלים says:

    היי הידעתם? ריהוט משרדי הינו כולל רהיטים למשרד וריהוט משרדי וריהוט משרד

  6. Every single day I will be learning somewhat more about NodeJS. It is definately the one programming language to get familiar with long term. Just finished the BackSpace.Academy AWS Certified Developers educational program. It’s opened up a totally new Realm of applications for me. Now I’ve got to find the time in order to get developing!

  7. all history says:

    As I have grabbed information from this website proved to be advantageous and useful so I suggest you to visit this website if you are facing problems while managing browsing history.

  8. run 3 says:

    Great, thank you for sharing this helpful guide, I think many people do not know yet

  9. majece majece says:

    I advise you to read information from https://resumecvwriter.com/blog/parts-of-cover-letter if you want to write cover letter. It was useful for me when I was in college.

  10. For the best and the easy methods of how to fix sound problems in windows 10 then use my link listed above.

  11. thank you sharing, nice job.

  12. Denny Handal says:

    I must say that it’s very useful for me. Thank you for sharing such post!

  13. Shanon White says:

    I personally believe that css is a essential part of web designing. Without this web designing is totally at zero level, upgrade in css properties is a good initiative I hope this will help users to enhance web design. I also like this design link is here https://professionalessayservice.co.uk/british-essay-writing

  14. kissanime says:

    Watch anime online in English. We Can Watch and Download High Quality Anime Episodes for free no register Needed.This

    website has a mobile-friendly interface.kissanime

  15. SMS API says:

    An SMS API is well-defined software interface which allows code to send SMS with a SMS gateway. Thousands of businesses around the world use this tool to automate their communication and send instant notifications to customers or users. https://www.thetexting.com/sms-api/

  16. I don’t know if it’s just me or if everybody else experiencing problems with your site.

    It appears as if some of the written text within your content are running
    off the screen. Can somebody else please provide feedback and let me know if
    this is happening to them too? This could be a problem with my web browser because I’ve had this happen previously.

    Thank you

  17. I learned a lot from the insight you shared. Thank you so much for sharing!

  18. Gabriel Welch says:

    The significance of substance has been developing each year, and 2020 will be no special case. All things considered, there are various advantages of substance showcasing, including expanded brand mindfulness, higher rankings in the web index results pages, more traffic, expanded validity, and more leads.

  19. Trevor Cunningham says:

    Needed this. Thank you so much
    Cheers from the whole team!

  20. 49s says:

    Results Today online. That’s why most of the people today participate in the sport of jackpot and win.I should
    say only that its awesome! The blog is informational and always produce
    amazing things.

  21. ddddddd says:

    A 2-hour journey is going to fascinate you with both the sides of Dubai. Either you in favor of getting enchanted by the historical aspects of Dubai or you want to get amused by sky-high buildings of advanced city; one of the Best Dhow Cruise Dubai will take you either to the Creek or Marina as per your demand

  22. gogoanime says:

    Latest Gogoanime HD SUb Eng Videos Online, Watch gogoanime online in high quality ,Free download gogo anime, Gogoanime videos English SUB HQ,

  23. The ultimate guide to successfully marketing with a business blogging in 2020 and why your company needs to start!

  24. What is a network engineer? This is someone who you may also hear referred to as a computer network architect. Network engineer requirements include essential skills in the design, planning, implementation and monitoring a computer network that supports wireless network services, video, data, and voice. This is a high-level profession. There are a lot of different types of networks that someone in this role can work with. Some examples include VoIP, which is Voice Over Internet Protocol Network, DAN – Desk Area Network, PEN – Personal Area Network, WLAN, which is Wireless Local Area Network, and LAN, which is Local Area Network.


Leave a Reply