Designing Beautiful Shadows in CSS(joshwcomeau.com)
joshwcomeau.com
Designing Beautiful Shadows in CSS
https://www.joshwcomeau.com/css/designing-shadows/
28 comments
This is a fantastic article! What a great resource for learning how to implement realistic and great-looking shadows in CSS.
Craft is beautiful. Thanks for this link!
It's posts like this that remind me why I force myself not to do front end. I always end up tweaking the same 10 lines of CSS until they're juuuuust right and never get anything done.
Great article!
Great article!
I do front and back end work, I have a conversation like this a lot of folks:
Rando Dev: "OMG CSS!"
Me: "Bro if you just want to get the job done there's no shame in picking a CSS framework and getting it out the door. It will look nice and you're good to go."
Rando Dev: "Yeah but then I wanted to tweak this and then I had to tweak this other thing and ..."
Me: "Whose fault is that now?"
You really don't need to get into the nitty gritty to do just fine in CSS land.
The amount of give and take and work that goes into a good CSS framework is shockingly high / it's great that it is done for you. Be aware of that work if you decide to get into the details....
Rando Dev: "OMG CSS!"
Me: "Bro if you just want to get the job done there's no shame in picking a CSS framework and getting it out the door. It will look nice and you're good to go."
Rando Dev: "Yeah but then I wanted to tweak this and then I had to tweak this other thing and ..."
Me: "Whose fault is that now?"
You really don't need to get into the nitty gritty to do just fine in CSS land.
The amount of give and take and work that goes into a good CSS framework is shockingly high / it's great that it is done for you. Be aware of that work if you decide to get into the details....
I call it “pushing pixels”. It’s incredibly time consuming, the devil is in the details.
I abandoned front end development long ago for the same reason - the endless rounds of people undoing each other’s changes and moving things one pixel here, one pixel there, make the blue more blue, make the blue less blue, add more white space, remove more white space, etc. Maddening. I know the couch looks good everywhere if my wife has to move it, too bad we can’t apply that same tactic to front end development.
I hear you - "pixel pushing" as it's called.
It helps to think of it as an art.
If you have the time to flesh it out, then enjoy the slow process.
I find the work is more rewarding that way.
It helps to think of it as an art.
If you have the time to flesh it out, then enjoy the slow process.
I find the work is more rewarding that way.
If it's "juuust right", I think you got something done. Don't be too harsh on yourself. ;)
Wow, this is way beyond what I expected. Josh consistently illustrates and explains these concepts extremely well. I really enjoy it.
I hadn’t considered the idea of colour matching to simulate raytracing. It looks great, but I’m not sure when I’d have a product to work on which would be complimented by this treatment. Maybe I work on boring stuff. Perhaps if it was done with enough subtlety I could get away with it.
I also wonder if it could become troublesome if you had nested ColourWrapper components. I suppose the most recent wrapper would take precedence, or it could be designed as such. Maybe I’ll give it a shot.
I hadn’t considered the idea of colour matching to simulate raytracing. It looks great, but I’m not sure when I’d have a product to work on which would be complimented by this treatment. Maybe I work on boring stuff. Perhaps if it was done with enough subtlety I could get away with it.
I also wonder if it could become troublesome if you had nested ColourWrapper components. I suppose the most recent wrapper would take precedence, or it could be designed as such. Maybe I’ll give it a shot.
This is a really good article and the examples are very pretty. I especially enjoyed the part about how filter:drop-shadow contours to the shape of the element (did not know that, and that's a handy trick).
However just beware that there can be a decent performance hit from having a lot of box-shadows.
However just beware that there can be a decent performance hit from having a lot of box-shadows.
> One more quick tip: unlike box-shadow, the filter property is hardware-accelerated in Chrome, and possibly other browsers.
In Firefox, everything is hardware-accelerated. And the `will-change` property is largely obsolete. (I personally wish they had stuck to the old translateZ(0) hack which was obviously a hack rather than defining will-change, since WebRender—what lets Firefox do all the rendering on the GPU—was already well underway and had demonstrated that something like will-change wasn’t necessary, though it was still a few more years before it was stabilised in Firefox.)
In Firefox, everything is hardware-accelerated. And the `will-change` property is largely obsolete. (I personally wish they had stuck to the old translateZ(0) hack which was obviously a hack rather than defining will-change, since WebRender—what lets Firefox do all the rendering on the GPU—was already well underway and had demonstrated that something like will-change wasn’t necessary, though it was still a few more years before it was stabilised in Firefox.)
While I generally agree, even in a hardware accelerated world will-change can still be useful. If you're transforming a complex box with lots of typeset international text and stuff in it, it can be necessary to buffer that whole box to a scratch surface first, so will-change is useful to optimize that.
But does will-change do that? I would think what you describe would be a pessimisation in many (perhaps most) cases.
(I haven’t the foggiest idea and my guess is wild rather than educated. I would like to be informed.)
(I haven’t the foggiest idea and my guess is wild rather than educated. I would like to be informed.)
It's a hint, so it has no (afaik) spec-required behavior. Whether it does that is up to the browser vendor and could depend on your device configuration.
The MDN guidance says not to use it unless absolutely necessary, which I agree with - but it was added to solve a real problem on certain browser engines (and the problem can be way worse on mobile.)
The MDN guidance says not to use it unless absolutely necessary, which I agree with - but it was added to solve a real problem on certain browser engines (and the problem can be way worse on mobile.)
Thanks for sharing its help me in my work.
I wonder if there will ever be a way to plug web elements into “unified lighting environments” as in Fuchsia’s Scenic [0].
[0]: https://fuchsia.dev/fuchsia-src/concepts/graphics/scenic/sce...
[0]: https://fuchsia.dev/fuchsia-src/concepts/graphics/scenic/sce...
Zero business value, slowing down mobile browsers. Great article and love the effect, though. The newsletter signup effect is worth a subscribe.
How can you say for certain there’s no business impact? I can imagine for really premium brands, this kind of attention to detail makes a difference.
Difference for whom?
I bet most users won't see a difference even if you ask them to search for it.
And most website lack more important features than shadows even premium brands. Sometimes premium brands in particular value looks over function.
And most website lack more important features than shadows even premium brands. Sometimes premium brands in particular value looks over function.
On the other hand, a lot of developers undervalue design.
Having sat through quite a lot of end-user sessions, I would make three points:
1. users do often notice these differences subconsciously, even if they say they don’t. Say “which do you prefer” and they’ll tell you the one with the nicer shadow (for example) even if they can’t articulate why.
2. When a site is more aesthetically pleasing, users report greater satisfaction with the product and find it more usable. Of course, there’s diminishing returns here, but premium brands may get more returns on these subtle extras.
3. Developers tend to prefer sparse, lo-fi designs more than non-developers.
Having sat through quite a lot of end-user sessions, I would make three points:
1. users do often notice these differences subconsciously, even if they say they don’t. Say “which do you prefer” and they’ll tell you the one with the nicer shadow (for example) even if they can’t articulate why.
2. When a site is more aesthetically pleasing, users report greater satisfaction with the product and find it more usable. Of course, there’s diminishing returns here, but premium brands may get more returns on these subtle extras.
3. Developers tend to prefer sparse, lo-fi designs more than non-developers.
https://apple.com
https://gucci.com
https://perigold.com
https://bugatti.com
That’s how. I guess it’s time to tell these guys what they were missing all these years.
https://gucci.com
https://perigold.com
https://bugatti.com
That’s how. I guess it’s time to tell these guys what they were missing all these years.
the Apple website uses background blur and has giant scroll-animated images. The store page has drop shadows and CSS transitions.
We weren't talking about "just shadows" though. While one of the sub-pages of one of four brands is really using shadows at least somewhere:
PS. And gucci not having an https certificate is another example how "premium brands" often have completely unusable or simply non-functioning sites. Still sells.
/* https://www.apple.com/store */
.rf-ccard-content {
box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
}
PS. And gucci not having an https certificate is another example how "premium brands" often have completely unusable or simply non-functioning sites. Still sells.
Gucci was an established brand long before having a website. Unfortunatly, most people don't start their business at that level, so they need to do whatever they can to stand out (or at least look half decent)
Their 1998 website probably used tables with celllpadding, and it was “good enough” at the time. But I suspect they’ve benefitted by changing it. However, since neither of us have data, it’s all subjective.
For those that do have data, they’ve decided spending millions on it is worth it.
For those that do have data, they’ve decided spending millions on it is worth it.
I disagree, please don’t tangentially deny my data points as “no data”. Four random vendors of “premium brand <something>” not doing today what was spoken about in this thread (properly casting shadows as described in tfa has zero business value for premium brands) is not no-data.
There’s certainly value in, at the very least, understanding how shadows can help delineate elements and create depth (which is a huge part of how we as humans create visual hierarchy to determine what’s important).
Much of the article might not be exactly “business value focused” but neither are the technical deep dives of database systems, though you’d never hear this kind of comment on that kind of post.
tl;dr: it’s someone nerding out a bit, it doesn’t need to create “business value”
Much of the article might not be exactly “business value focused” but neither are the technical deep dives of database systems, though you’d never hear this kind of comment on that kind of post.
tl;dr: it’s someone nerding out a bit, it doesn’t need to create “business value”
Why can't depth be a design element that creates visual hierarchy for a better UX? Better UX can generate business value.
[deleted]
I highly recommend the “Refactoring UI” book. It’s full of very actionable principles and tips like this that you can start using tomorrow to make less ugly things. It includes things like: shadows, HSL for colors instead of RGB, how to strategically (de)emphasize text, etc. It won’t make you a designer, but it will make your personal projects less ugly and help you survive the gaps between consulting with a real designer.
Wow.. Josh did quite a lot here I never expected this. I've never been able to make something like that and simulate ray tracing... wow just wow
The more I read, the more I think ALL of this should be taken care by a library/framework/toolkit
It's common for that light source to be above and slightly to the left
Is this still the case? Windows used to have an almost 45° lighting angle, but more recently (MacOS, Material Design) the more common case is the light source shining from the top.
Is this still the case? Windows used to have an almost 45° lighting angle, but more recently (MacOS, Material Design) the more common case is the light source shining from the top.
Yes, largely, the top-left light position is quite outdated, and modern designs are a lot more likely to have the light directly above.
Top-left was used in the past because the only lighting hints was the edge colours, and this looks weird with a light that is directly above, so typically a 45-degree light was assumed.
In modern design, there is very little edge colouring used, and instead the light determines only shadow positioning. And shadows look perfectly fine with a light positioned directly above. This placement feels a bit more natural, as it doesn't introduce an arbitrary sideways bias.
Top-left was used in the past because the only lighting hints was the edge colours, and this looks weird with a light that is directly above, so typically a 45-degree light was assumed.
In modern design, there is very little edge colouring used, and instead the light determines only shadow positioning. And shadows look perfectly fine with a light positioned directly above. This placement feels a bit more natural, as it doesn't introduce an arbitrary sideways bias.
You do see top-left lighting in 'neomorphic' designs nowadays.
The use of bevels has similar attributes to the edge-highlights of win 95, where putting the light from the top can make the left/right edges indistinct.
The use of bevels has similar attributes to the edge-highlights of win 95, where putting the light from the top can make the left/right edges indistinct.
Does anyone other than design showcase websites use "neumorphic" designs? I have not seen any serious app use it, and it is ugly as hell.
"In my humble opinion, the best websites and web applications have a tangible “real” quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient."
Yet his own site style is totally flat?
Yet his own site style is totally flat?
It’s not totally flat. Flat where appropriate. Documents should be flat. Shadows are for things that appear on top of other things. There’s a message on the left that says, “Hi there! Can I share a cool thing I’m working on with you?” This has a shadow, because it appears on top of the document.
The "Posts" nav item has a dropdown that overlays the document and is still completely flat.
The dropdown has a shadow for me with Chrome (and also a sound effect).
There is a drop shadow on the posts nav item: https://i.imgur.com/dY408DK.png
"The shoemaker's children always go barefoot" as they say.
That was a really nice blogpost. It never occured to me that I could apply multiple shadows to an element.
The "optimized shadow" version has a lot of subtle banding artifacts, presumably because of the layers. If I squint, the optimized looks better, though.
From the article:
"Layered shadows are undeniably beautiful, but they do come with a cost. If we layer 5 shadows, our device has to do 5x more work!
This isn't as much of an issue on modern hardware, but it can slow rendering down on older inexpensive mobile devices."
5x more work is always 5x more work. Can we just stop downplaying it?
"Layered shadows are undeniably beautiful, but they do come with a cost. If we layer 5 shadows, our device has to do 5x more work!
This isn't as much of an issue on modern hardware, but it can slow rendering down on older inexpensive mobile devices."
5x more work is always 5x more work. Can we just stop downplaying it?
It certainly looks very nice compared to a single basic box shadow. Though, 6 stacked boxes is also a reason why otherwise innocuous webpages are annoyingly jerky when scrolling through them.
I get a white page with unexpected error on desktop Safari.
TypeError: null is not an object (evaluating 'e.current.getBoundingClientRect')
Gotta love React, TypeScript and all this wonderful modern frontend stack.
So resilient.
TypeError: null is not an object (evaluating 'e.current.getBoundingClientRect')
Gotta love React, TypeScript and all this wonderful modern frontend stack.
So resilient.
This is something I've wondered -- can someone smarter than me explain the benefit of using something like Next.js or Gatsby for a blogsite like this over an SSG like Jekyll or Zola? Doesn't Next & Gatsby deliver a bunch of JS to the client either way?
> If CSS had a real lighting system, we would specify a position for one or more lights. Sadly, CSS has no such thing.
Are there any post processing libraries that can add this? It would be super interesting to treat elements on the page in 3 dimensions
Are there any post processing libraries that can add this? It would be super interesting to treat elements on the page in 3 dimensions
That's a good point. Could largely be achieved using a combination of design tokens to indicate light source, and an abstraction that allows assigning an elevation value (much like in Material Design) to individual elements.
Arguably what's missing is the ability to use blend modes with shadows, so that you don't need to explicitly know anything about the elements that the shadows are rendered on.
Edit: Found a Stackoverflow answer that shows a way to somewhat emulate this using a pseudo element: https://stackoverflow.com/questions/52838406/apply-blend-mod...
Arguably what's missing is the ability to use blend modes with shadows, so that you don't need to explicitly know anything about the elements that the shadows are rendered on.
Edit: Found a Stackoverflow answer that shows a way to somewhat emulate this using a pseudo element: https://stackoverflow.com/questions/52838406/apply-blend-mod...
That's all I could think about while reading this!
I threw together a crude implementation of a pure CSS lighting system if you're interested: https://github.com/kinseywk/zShadows/blob/gh-pages/index.md
[deleted]
[deleted]
This post must have taken a ton of time to build, and it's extremely well done. The author has a really nice CSS course about to launch if anyone is interested.
https://css-for-js.dev
https://css-for-js.dev
To my eyes the best looking shadows on the page are the harder box-shadows, like the one labeled typical shadow at the beginning of the article. In particular the very soft shadows look indistinct and displeasing.
It might be because using a single, somewhat hard, black colored box-shadow is the most physically realistic option presented for a single distant light source. Adding more shadows of different radii at the same angle certainly does not approximate raytracing and give a more physically accurate result. In fact the lighting setup you would need to achieve that effect in real life would be very awkward, a set collinear lights of increasing size. Also, black is close to the best color to blend with for shadows, because it will lower the intensity of each color channel in roughly the same proportion. It won't give exact results unless you blend in sRGB space, but neither will any color blend, and black is probably the best approximation.
And two of his demos are very misleading. The majority of the 3D effect in the reveal demo comes from the actual 3D effect. Before sliding the slider, I couldn't judge the depths at all. And the elevation demo looks good, but I think much of the effect is from the size of the div increasing. If the purpose of the demo is to show the effect of shadow sharpness on perceived depth, it shouldn't confound it with another variable.
It might be because using a single, somewhat hard, black colored box-shadow is the most physically realistic option presented for a single distant light source. Adding more shadows of different radii at the same angle certainly does not approximate raytracing and give a more physically accurate result. In fact the lighting setup you would need to achieve that effect in real life would be very awkward, a set collinear lights of increasing size. Also, black is close to the best color to blend with for shadows, because it will lower the intensity of each color channel in roughly the same proportion. It won't give exact results unless you blend in sRGB space, but neither will any color blend, and black is probably the best approximation.
And two of his demos are very misleading. The majority of the 3D effect in the reveal demo comes from the actual 3D effect. Before sliding the slider, I couldn't judge the depths at all. And the elevation demo looks good, but I think much of the effect is from the size of the div increasing. If the purpose of the demo is to show the effect of shadow sharpness on perceived depth, it shouldn't confound it with another variable.
I am surprised to find this comment so high up when so much of it is so categorically wrong I almost wonder if you're saying opposite things as a joke.
Perhaps the most egregious is your position on black shadows being the best and physically most realistic color to blend with, when in reality pure black doesn't exist in nature almost at all, it's just how our brains process things and if you actually use pure black then things will look subtly wrong--I know because I used to do that and learning to stay away from black where possible after taking a basic design course was one of the things that best improved the feel of my designs. Like, there's decades of research in the arts, sciences, and design community about this! It works for a reason.
For the sake of brevity, I'll leave this blog post here that explains it better and more in depth: https://ianstormtaylor.com/design-tip-never-use-black/
Perhaps the most egregious is your position on black shadows being the best and physically most realistic color to blend with, when in reality pure black doesn't exist in nature almost at all, it's just how our brains process things and if you actually use pure black then things will look subtly wrong--I know because I used to do that and learning to stay away from black where possible after taking a basic design course was one of the things that best improved the feel of my designs. Like, there's decades of research in the arts, sciences, and design community about this! It works for a reason.
For the sake of brevity, I'll leave this blog post here that explains it better and more in depth: https://ianstormtaylor.com/design-tip-never-use-black/
There're two claims of fact (as opposed to just my opinion) in my comment: That layering multiple increasingly sized box-shadows in a line isn't more physically accurate than a single box-shadow, and that black is the most physically accurate color to blend with.
I'm quite confident of the first claim. You're contest of my second claim makes me think I was unclear. I don't suggest using black at 100% opacity as a shadow color. Instead, The shadow should be black with some fractional opacity, so that the background color is blended with black. The result of blending with black will not be pure black, but instead a good approximation of less intense light of the same color.
I also recognize that it's true that designers often use more saturated colors as the colors get darker, to good effect. But in the case of the shadows presented in the FA, I don't think it looks good, and whether it looks good or not, to claim it's inspired by physical realism is wrong.
I'm quite confident of the first claim. You're contest of my second claim makes me think I was unclear. I don't suggest using black at 100% opacity as a shadow color. Instead, The shadow should be black with some fractional opacity, so that the background color is blended with black. The result of blending with black will not be pure black, but instead a good approximation of less intense light of the same color.
I also recognize that it's true that designers often use more saturated colors as the colors get darker, to good effect. But in the case of the shadows presented in the FA, I don't think it looks good, and whether it looks good or not, to claim it's inspired by physical realism is wrong.
Fractional opacity mixing with pure black is still not the most physically accurate shadow, because in the real world ambient light is mixed in with shadow, and also the color of the object casting shadow (and the surface the shadow is cast on) also creates color casts on a second light bounce from off-angle ambient light hitting an object, which influences shadow color in a way that's not "black on top of surface color." The algorithm for blending drop shadows doesn't take these things into account. https://willkempartschool.com/the-secret-to-painting-realist...
The link above also has an example of the use of multiple shadows to create a more naturalistic feel, namely that in the real world we are accustomed to, one source of light creates multiple kinds of shadows because of reflections from clouds, objects, etc.
This is all linked to physical realism, to help carry over our expectations of what the world looks like into a (in this case) digital space.
The link above also has an example of the use of multiple shadows to create a more naturalistic feel, namely that in the real world we are accustomed to, one source of light creates multiple kinds of shadows because of reflections from clouds, objects, etc.
This is all linked to physical realism, to help carry over our expectations of what the world looks like into a (in this case) digital space.
I think the most important tip here is not to use neutral gray shadows. I’m no artist, but I’ve heard that an early lesson for all painters is never to use neutral grey shadows. They need not match the hue of the object they’re falling on, I don’t think; a blue tint is sometimes recommended.
Thinking about the effects of subtractive colours with paints never maps successfully onto additive colours we have on screen. In fact the way in which say blue and yellow make a form of green by subtraction is fascinating and explains why you can never mix a really bright colour. There is no equivalent on screen as far as I know.
I was taught to put my black paint away and never ever use it! You really don't need it (unless you want to paint something that is actually black).
I was taught to put my black paint away and never ever use it! You really don't need it (unless you want to paint something that is actually black).
(amateur painter) Generally, shadows have a lower chroma and value than the color of the object.
If I'm painting a purple sphere, then the cast shadow will be a much darker value of purple.
If I'm painting a purple sphere, then the cast shadow will be a much darker value of purple.
This article is fantastic. Covers everything I would have said about shadows as a designer (from visual and corner case point of view), great CSS/styled components implementation and clearly written with wonderful presentation. 5/5
"Physically Based Rendering in CSS" sounds kind of silly, but here we go
First, the width of the blurred region (penumbra). Imagine putting a camera on the ground and pointing it at the sun. By moving the camera in and out of shadow, it can see more or less of the sun. Intuitively we know that the higher the box is, the bigger the penumbra. The sun has an apparent size of .53°, and so does the region of partial shadow descending from the edge of the box. Some trigonometry later, and The ratio of the width of the penumbra to the elevation of the box is .00925 or about 1%
Next, we can calculate what portion of the sun is visible from the penumbra. The amount of sun visible is a portion of a circle, so we do an integral of a circle function and hoo boy would that be a pain to type on mobile. The graph is sort of a `smoothstep` shape, but is very close to linear
First, the width of the blurred region (penumbra). Imagine putting a camera on the ground and pointing it at the sun. By moving the camera in and out of shadow, it can see more or less of the sun. Intuitively we know that the higher the box is, the bigger the penumbra. The sun has an apparent size of .53°, and so does the region of partial shadow descending from the edge of the box. Some trigonometry later, and The ratio of the width of the penumbra to the elevation of the box is .00925 or about 1%
Next, we can calculate what portion of the sun is visible from the penumbra. The amount of sun visible is a portion of a circle, so we do an integral of a circle function and hoo boy would that be a pain to type on mobile. The graph is sort of a `smoothstep` shape, but is very close to linear