That is, “don’t use black for shadows over colored backgrounds.” At every step of my design education I was taught this. For example, when adding a drop shadow as a layer style in Photoshop, don’t just pick a black or a gray but sample a color from the background, then dial it back in opacity until it looks good. This is because shadows in real life are not black. They are darkened versions of whatever they sit on top of, because there is less light. Check out this shadow. If you were trying to recreate that, I don’t think black at any opacity level would get it just right.
Now that we have the (awesome) RGBa in our CSS toolbox, I’ve been hearing and seeing people use dialed back black (e.g. rgba(0,0,0,0.5) ) for backgrounds and shadows. This is being taught and encouraged with comments like “the shadow color will pick up the background color because of the opacity“. True, it will, but it will be mixed with black, not a deeper toned version of itself.
I’ve heard Dan Cederholm teach this at An Event Apart and in Bulletproof Web Design. Meagan Fischer also has a recent tutorial with black as the example shadow color. Dan and Meagan are better designers and smarter people than myself, so I’m not trying to get up in their grills. I think their point is that it’s smarter and more future-proof to use black, because black can sit on any background color equally well, whereas a toned shadow only works on that tone.
My point is, if you are going to change the background color, you are making changes to CSS. So while you are doing that, just change the shadow tone also. If you can’t control what the text/box shadow is going to be on top of then yes, use black. If you can, use a toned shadow.
Or am I whack? Is using black basically the same thing as a “darker version of itself”? I just bring this up because I’ve been seeing this a lot lately and literally during school and at various jobs I’ve had were we always taught to tone shadows.
Since “Black” is a tone, and not a colour, having a darker version of the source below it, and changing the opacity of the black should yield the same result.
Change the box shadow to somewhere around .37 and you barely see the difference. If you look closely, you’ll see a slight difference in color, but a quick glance renders the same result. Both look the same.
ditto
When designing in Photoshop, I would use black and set the overlaymode to multiply…
Right…
Hahahaha!
What about shadow over the photo?
In your example, although the black looks OK, I think the coloured shadow really looks much more natural. I had never thought about doing shadows like this. I have always just used black or a shade or grey.
I think it is a great point, which I had not often thought of. I agree that using a different tone of the background is a more natural way to do it.
I am looking forward to seeing what other people suggest.
I’m much more of a print guy, but a shadow that’s made up of just black is one of those things that gives it away. In PS, I eyedrop the color I’m casting onto, set to multiply (as Tom noted) and darken as necessary.
A very good point of view but sometimes black is the only choice for shadow color.
I’m with Tom on this one. However just as with just about anything in the web design world it all comes down to the prefernce of the idividual designer. In my humble opinion there really isn’t a right or wrong way to shadow.
Use what looks best in the given situation.
In a similar fashion to print work, you may find that a “Rich Black” or “Cool/Warm Black” fits better depending on the design.
Generally speaking I’ll avoid a #000 black as I find it has an unwanted finality to it.
Great point Chris. Since there is no “multiply” setting, its important we as web designers add color into our drop shadows to better match their surroundings. Just setting opacity on black will not be the same as a tinted shadow. But one this is sure… typing
rgba(0,0,0,0.5)
is a whole lot faster than looking up the right color. So does that mean we are lazy?Agree with Doug! See in design you can always use black and then use Multiply or change Opacity or Overlay.
You have nothing like this in CSS. As long as you have a single tone in the region where the shadow would come, it is OK to NOT use black, but as soon as you have more than one color, it gets messy and the easier or probably the only way out is as shown by Doug to USE black.
I’d prefer a tonal shadow any day over the simple black. Sure, the black rgba way is easier, but as Chris points out, if you’re making CSS changes anyhow, it’s simple enough to change the shadow to a matched value.
The details are what set the good designers apart.. not shortcuts.
I’ve never heard whether one is better than the other, but I find myself often using a darker shade of the particular color.
I’ve also had a few designer friends mention that really a darker shade of a particular color is just that color with a bit of black added to it. With this argument, a black shadow with a low opacity would have close to the same feel, although it may need an even lower opacity to match it’s colored shadow equivalent.
I’d have to disagree with: darker shade = just add black.
“adding black” to a colour will darken it, but will often make it “dirtier” looking too.
The reason is because adding black reduces saturation as well as brightness, but when adding a darker version of the same color the difference in saturation is up to the designer.
In college we learned that if you add the opposite color, you get a natural, darkened shadow. For example, if you have a blue that is partially in shadow, darken the shadow area with orange (in small amounts, until the desired shade is reached). This was for paint, for what it’s worth.
You used the same alpha setting for both the colored and black shadow. If you used a lower alpha setting, does it not end up with the same color of shadow? Currently, the only difference I see is that the ‘color’ one is lighter and harder to see.
That is exactly what I thought as soon as I saw the example.
Black is the deepest toned version of all colours, no? So all you’re saying is don’t make shadows too dark, no? Make your RGBa alpha more transparent then, no? LOLing at my noes BTW.
The toned one is much more subtile/natural but I think the average user wouldn’t even recognize it =)…
Go to the demo page, pop open Firebug, and edit the CSS on the black shadow box to use .33 as the alpha in the RGBA.
I am having a hard time telling the difference. In Firefox.
This is a good discussion.
I wish CSS3 would add blending modes. HAR!
I tried this and got the same results, they were indistinguishable to my eyes.
While we can arguably control a finer level of detail using toned shadows, for most of our everyday work I think black is fine.
Great article Chris, this was definitely something that needed discussing!
As an artist, I would never use black for shadows. It’s pretty much a rule of thumb in art. You would use darker shades of the colour you are using, even mixing it with its complementary colour i.e. the colour opposite on the colour wheel. As such, when using CS4, etc., I stick to that same rule.
Name should say ‘Heather’.
Completely agreed. Complimentary colors are key, which is something a lot of people don’t know.
Since now I’ve basically always used black as a shadow when doing designs. Hadn’t really thought about your method.
After seeing the comparison in your demo I really have to say toned shadow looks really much better.
Really enjoyed reading the discussions in the comments section also.
Good article Chris. All designers should know this, but it’s good to point out. Also, black can be used but only when there’s a gray background. I do agree that using Multiply in Photoshop with a black shadow achieves similar results.
In my opinion Chris I think it’s better to use black or a dark grey, not just because of the maintenance issue but also because I believe you darken a hue by reducing the white or increasing the black, adjusting its opacity to suit. With both Photoshop and CSS we have fine control over the opacity so we can then make the shadow as subtle or vibrant as we need it to be. I’m not rubbishing your suggestion at all, I’m just of a different opinion.
From your demo I must say I do prefer the appearance of the toned shadow however I believe adjusting the opacity of the black shadow could even out the results?
A great article though, we need more articles that give us something to think about rather than being dictated to by the likes of Smashing Magazine.
From a physics prespective, black is absence of light – photons.
So whoever told you that “They are darkened versions of whatever they sit on top of, because there is less light” is a bit wrong. A more correct statement is “They are black (no light) versions of whatever sits on top but they get blended with the background color because SOME light goes through from the sides, making the blackness softer – more opaque”.
So what really is shadow? It’s a black thing caused by absence of light behind an object that prevents photons to pass through, only softened by light (pure WHITE) going through from the sides of the object, blending with the black shadow giving it a more opaque look.
As someone very correctly pointed out, in the demo, you have set the same opacity for both tones (black and background shadow color) which is simply wrong. Try Firebugging it and reducing the opacity of the Black box shadow, it should – at some lower opacity – have the exact same effect.
People are taught not to use black for shadows in art classes because it’s very hard to control opacity on tangible color paints in my humble opinion.
Come to think of it, from a hard Physics point, using black+opacity for shadows reflects absolutely more accurately to how nature does it.
Vassilis, you are assuming that the light in question is pure white light, which may be the case in a hard physics model, but this is rarely the case in the real world.
Look at shadows on snow on a sunny afternoon. Are they black? Not at all, they are generally blue. Why is this? Ask yourself what the color of sunlight is, and then what the opposite of that color is.
Natural shadows will always be achieved by using the opposite of the color of the light, blending with the color of the surface the shadow is falling on.
Is using black for shadows wrong? Not as long as the light source in question is assumed to be pure white. The trouble with this assumption is that rarely in nature are we presented with a light that does not have some areas of the spectrum filtered out.
Black-based shadows are not wrong, they are simply unnatural. The Impressionists figured out this little jem. Compare a Renoir to a Rembrandt and you’ll see who better understood natural light.
Using rich shadows in a design may be just the thing that tips the scales in the favor of your design; one of those little touches that no one would consciously call out, but makes them say “this one just feels better.”
When it comes to web design, I find that RGB does a decent job allowing black to look good as a shadow on top of any colour. With in print, cmyk does not like this! You ever notice those shadows that just don’t look natural? Well that is why, in print lighter tones of black does not look natural.
So I guess it depends on preference in web, print should always be done in a darker tone of the background colour!
I did what one commenter mentioned: change the opacity to .33 in FB. I can see the difference. The tonal shadow is more realistic regardless. The issue is this: I am staring at this as I change it, so of course I am going to notice. I am the anal retentive one who is designing this. Most people? Completely oblivious to any of this and will never ever notice. If you have a few colors and a few shadows, by all means, use tonal. If you have tons of shadow-based styles (then your design is wrong!), and you’d have to make tons of css changes to adopt this, and you’re lazy, then by all means, go with a low opacity black or dark grey (#2D2D2D).
on another note. I see some people commenting that just adding black to a colour will make it darker, so essentially using black would be fine. Well in theory this sounds about right, but in practicality, you want to try to add as little black as possible to a colour to make it darker. In print, adding black will make any colour look much darker than it is on the computer, so the best practice is to add other colours that will create the same tone, thus getting the proper colour when printing.
Thought that would help some of you people who only focus on web design out.
Thank you for this useful tip. One mistake I’ve just realized.
Not seeing any shadows in Safari…. looks like you added the -moz box-shadow rules but not the -webkit versions…
Until I fired up Firefox I wondered what the fuss was about…
Change the opacities of the black version thusly:
box-shadow: 0.36
background: 0.06
text-shadow: 0.5
And I can no longer tell the difference between the two. That doesn’t mean that black is always the right choice, but I don’t think is quite the proof you’re looking for.
I changed the values as per your suggestion Ian, and i can definately still see a difference.
I eyedropped the two shadows on the very first pixel of shadow (on the bottom) and got these values (after i changed opacities as per your suggestion):
Blue Shadow: r80 g160 b156 – Black Shadow r92 g154 b154
Definately more blue in the toned shadow. And side by side in photoshop the black shadow is more “dirty”.
Intestingly i couldn’t see as much difference in the text shadow. I think this is because it’s only small.
In print i’ve always used toned shadows, ore the “multiply” blending mode on a black shadow – which does actually change the colour values of the shadow to act as a tone of the underlying layer.
I think on the web you can get away with black shadows on tiny things like a line of text, but bigger things like those divs need a toned shadow.
If you’re going to change the background colour and you’re using a black shadow you would have to adjust the opacity anyway on different colours, so why not change the colour aswell.
Simply use black, set to “multiply” and reduce the opacity to please the eye. (kind of a rhyme)
EasyPeacey!
:)
Greetings from Germany,
Jo
I agree with Chris. Everyday in art school my color teacher would actually yell at someone in the class for using black to make a shadow. Shadows usually are the complimentary color to the light source. For example. If it’s really sunny outside and warm, shadows are going to be a very cool color. However, on the web there really isn’t a particular light source. Black probably is okay. BUT if you want to add a little extra atmosphere to your site, using warms and cools and perfecting shadows will definitely change the feeling.
Hm…
@Jo: ‘multiply’ is not available in css, as said before.
I think one cannot think in way nature does. Nature has all colors, nut only R,G and B as screens do. Screens just combine these colors small enough that they cannot be seperated by the human eye. Right? Maybe im am wrog, i am just a coding guy, nothing with css.
So what does the screen really do, whe you tell it to display 0,0,0? It is displaying ‘no red’, ‘no green’, ‘no blue’. Not ‘black’. And if it does the 255,255,255 thing, it is not displaying white.
What does it do, if i add a css layer with ‘no red’, ‘no green’, ‘no blue’ as its color and any opacity? Frankly i dont know exactly, but i cannot do anything apart from changing these three values. And i guess they will get changed all in the same way like 200,200,100 with an overlay of 0,0,0,0.5 will become 100,100,50.
So if you know the algorythm of the opacity, which is the designers guys job to know, you should be able to set the shadow in black. harder shadow black, softer shadow grey.
grey will be just like more scattered light arount the object (or behind it) as more light comes from other directions, not the source of light. and grey will bring white with it, as grey is everything between black and white.
Hm. But that would mean, that grey is just less opactiy of black, right? Ok, I am stuck here :) Ah, no. 100% black is ‘every pixel below gets black’. 50% black maybe ‘half of all pixels get black’ or ‘all pixels below loose 50% of their brightness or whatever’. 100% of a 127,127,127 black (which is grey) brings along 50% of 255,255,255 and 50% of 0,0,0 pixels. That must be the difference between black and grey shadows.
Please let me know if I am wrong or you have more on that thought.
Oh right..!
Thanks..!
That’s great..!
I usually start with a black shadow in photoshop, then lower the opacity to get that darker shade of the background color. Then sample that color and get the hexcode for CSS :-)
Coloring shadows are just another way to keep designs harmonious. I did a little experiment, last month, with colored drop shadows. It’s on my front page. Glad to read our fellow web-heads are in agreement too. Eager to read more comments though; good stuff here!
For a website, you would want to use black wouldn’t you? CSS is meant so that you don’t need to set custom things for each image on each section. If you have different backgrounds and want a shadow that you can switch on and off quickly then setting it once and not worrying about it would be best.
@Bianca
Yes that’s it, it’s the complementary color:
For example: What color do a cast shadow of a tree trunk has on the shiny white snow?
Because the sun is yellow its complemtary color then gives a – kind of? – blue.
And: warm light source – cool shadow
cool light source – warm shadow
… but that rather for painting :)
And yes, there is no cool or warm light source within the computer (to be precise) the only thing a designer can do is give a kind of artistic feeling to it. To mimic the drop-shadow of my window over a day would be an exiting journey or even over the years… winter sommer and so on – haha!
I’ve always used black but it makes sense now to use a tone for that natural effect.
I can see why it would be a pain in the ass if you change the original tone and you don’t use CSS3 for the shadows.
Wow.. I would not have thought this topic would have drawn such a heated (and scientific) discussion. Another great blog post Chris. Gotta love a topic that makes people think.
I personally like lighter colors myself. So I would not use a black background.
Interesting to think about though.
What if you want a drop shadow on a white background. i dont think this method would work, therefor you would have to use black.
Much has been said, but I’ll weigh in anyway (BFA in painting/20+yrs in print design/5yrs in web)…
1) there’s no right or wrong in how to build shadows w/css. The case can be made for black % when spanning a multi-colored element. The case can be made for a shade* over a solid bkgd. It comes down to choices based on desired style and technical considerations.
2) when working with paints (subtractive color model) yellow, red, blue are considered primary colors. Adding white to a color yields a tint; adding black, a *shade. Mixing in a complementary color (opposite on color wheel) dilutes the saturation/brightness/chroma of a color. Realistic shadows reduce saturation (chroma) and lightness (value). Realistic rendering also includes reflected light. Color harmonies are achieved by mixing small amounts of other palette colors into each color.
3) print is similar to paint, in that it is also subtractive. However, unless using custom inks (like PMS) colors are visually mixed CMYK dots on a page as separated from native art file. Depending on the art, shadows can be built by adding % black (K) or complementary color, etc. But they will still be separated to CMYK dots on press.
4) computer color, RGB, is an additive model and arguably the most complete and controllable…and yet…it’s back to choices of HOW the shadow is built; WHAT the shadow overlays; IF the element with shadow is being used elsewhere; etc.
Personally, I’ve created shadows both ways: with a darker shade of the color and with % black. I think the PSD default of 75% is far too dense for most applications (when I’m saving a PNG file). For CSS3, I’ve set up a shadow class that I can apply to elements. In this case, I use % of black so color that the element overlays is not a factor.
Well presented Catherine, thank you for the input!
I’ve definitely softened my opinion from all the great comments here. I’m still not 100% sure if the exact same shadow color can be replicated with using a opacity of black or not, as some suggest is possible. It would be cool to see some browser math regarding what RGB values are ultimately possible starting with one RGB value and adding transparent black on top of it. I still have a feeling that the range of color possibility is still limited compared to using shades. (You didn’t say otherwise in your comment, I’m just thinking in a stream here).
Thanks, Chris. No, I didn’t say. ;-) Mathematically, there’s a wider range of shadow colors when mixing RGB values beyond black. That said, our eyes cannot distinguish between all the 16+ colors we can mathematically describe.
So it comes down to a matter of perception–and how the designer chooses to portray the *simulation* of light shining on a 3-dimensional object casting a shadow. After all, we all know we’re really looking at a 2-dimensional back-lit image!
It’s sort of a modern equivalent of Fauvism vs. Cubism–with hex numbers. ;-)
I was taught the same thing at school but I think it’s a bit too anal for the web.
If you’re going to start setting different shadow colours then you’re forgetting why CSS is so awesome. It makes our lives (including future maintenance) easier. It has nothing to do with laziness.
You’d only be making life that little bit harder for yourself and Joe Bloggs REALLY isn’t going to tell the difference (or care) if it’s black or a darker shade of blue.
What if you have an element sitting across two different colours? What shade do you pick then? You pick black and reduce the opacity ;)
Art is fixed, web design isn’t.
Great discussion btw =)
Jenna: I’d use a desaturated deep blue with an alpha to span two different colors. The blue shadow will always feel more natural because it is based on the shadows cast by our main light source: the sun.
Wow, that is a really great point you’ve got there. Thanks for the roundup, I really was not thinking much about coloring of shadows. Thanks much, Chris.
What about the shadow on that nice and shiny RSS button on the upper right of the site? ;)
lol in real life black is not a color.
It becomes black for absence of light so if the colour becomes darker you can say it’s becoming black, so it’s the same.
And the freedom of using black or the original colour as a shadow is the good part of design in opposition to real life.
In your examples I wont say anyone is right or wrong, they are just different kind of shadows, possible thanks to technology =D.
As many people have already said… paint is a different thing than layers of opacity. Adding a layer of low-opacity black over top the colour is more analogous to adding a bit of black INTO a paint colour and mixing it together to create a tint. Painters don’t stock every shade and tint known to man, they take the ones they like and enjoy using, and if those aren’t suited to the job, they sometimes mix colours together to create a new colour, and then sometimes tint or shade to dial it in.
So, if we’re going to use paint as an analogy, that would be like saying that to get a realistic shadow, painters need to have a tube of exactly the right shade on-hand. But no, they’ll take the colour they’re working with and add black. ;-)
In any event, adding black to make the shade, or happening to have the exact “right” shade in its own tube, the end results would be the same. Just as for web. The method of using a shade will of course work, but so will using black.
Greg
In the first paragraph I meant to say “shade” at the beginning rather than tint.
Any chance of adding a 5-minute self-edit feature to your comment section Chris? lol
I personally just keep it black and use the overlay setting when it’s over colors, which creates the perfect colored shadow. doesn’t always work of course because a black drop shadow over white set to overlay won’t show at all.
Not sure if this will work but:
if not it’s here:
Example
So the top box is just a simple overlay blendmode set to the dropshadow layer style. But then as you can see the issue becomes if it’s over any white at the same time it will look strange. This is fixed by creating a duplicate of the layer, changing the overlay to normal blend mode, then pushing the duplicate above the white bg layer but below the colored bg layer. in more complex setups I’ll actually merge the style layer with a blank and cut out the section of the duplicate layer that is over white to produce the effect.
Why not just decrease the luminance of the background in the shadowed area?
Did you notice the topic and domain?
I guess it just needed to be said.
rgba help us!
Sometimes it looks better when sampling the color of the background. Sometimes I simply need pure black.
its not looking much better..but i love black color. try with solid black color
http://logodesignswork.com
Happy New Year
Whatever works for you is good. If you use a raytracing program, then you actually get shadows automatically being cast by a light source, instead of the “fudged” shadows we make.
In real life though, a shadow is lack of light, and it is black, unless there’s: fill in light from other directions, reflections off the object, the object gives off light, or the object is semi-transparent.
In Photoshop/Gimp/Inkscape using layers works fine for most cases.
Chris
I’ve always used a gray color for shadows. Have to give the sampled background color a try. Thanks for the tip.
In real life, shadows are lit by ambient light. The most common color for a shadow on this planet is therefore slightly bluish, because it’s filled in by a small amount of light from the blue sky.
Then you some portion of the direct light reflecting off the surface, and reflecting again of the back side of the object, which also contributes to the color of the shadow. This effect can even be stronger than the ambient light if the main light is particularly bright and the object is close to the back surface.
So, it’s very complicated.
Your suggestion of using a darker and more saturated version of the background color will tend to give the impression of strongly colored ambient light of the same color as the surface. In other words, it feels like one is looking at a teal wall in a teal room.
I’d say you’re mostly wack; shadows are not normally more saturated than the surrounding surface. Simply using black is the most realistic in a general sense. But to be truly accurate, you have to consider lots of other factors.
Great article, I actually never thought about this until now…. but of course the shadow is not completely black… ;-)
Thank you
If only CSS was a real language with variables, objects, functions, etc.. we could define the shadow based on what’s actually under it, dynamically.
One can do that in Javascript but this should be in CSS because this is styling.
The other option is to drop CSS altogether and replace is with a Domain Specific Language, written in Javascript. A file home.css.js would be interpreted by the DSL to dynamically style the page.