2

Consider a circle on a white background with a nice (dark and untoned) shadow. Circle on white background

But when the background is turned black (#121212), the shadow completely disappears. Circle on black background

I've scaled the web, and the only suggestion I see is to make the shadow actually light. Circle on black background

However, as you can see, it does not achieve the effect of an actual shadow, but it looks rather like a glow, which is not what I want. See, a shadow is the result of blocked light; it wouldn't make sense to make a shadow lighter than its surroundings.

The final solution I could think of is to make the background lighter. Lighter background

However, the background is too light to be dark.

Is there a solution to this?

Not sure if this is super helpful, but I'm a web developer, so this is CSS and HTML.

6
  • I think you have pretty much summed it up yourself- either the background needs to lighten to be able to see a darker shadow or the shadow must lighten to see it on a dark background. – Kyle Jun 15 at 4:17
  • @Kyle so there is no other solution. – code Jun 15 at 4:26
  • You cant make device minimum darker yes. – joojaa Jun 15 at 4:51
  • 3
    Isn't this kind of like asking why you can't see shadows at night when there are no lights? Black on black = not visible. Something has to be less than black for any shadow to be seen – Scott Jun 15 at 5:58
  • @Scott well on other projects in dark mode they still manage to do it... I realized that they made the background lighter. – code Jun 15 at 6:56
4

Here is an option to make your required dark shadow show on a dark background. This is done in Illustrator.

This is a radial gradient from black to gray behind the blue circle which has an attached dark drop shadow.

If there were an actual light source to provide the shadow then there would naturally be some light spill off onto the dark background.

enter image description here

5
  • Thank you for your great answer. I didn't actually take care to say that I'm not using AI, it's HTML and CSS... do you have any ideas how this could be well rendered? – code Jun 15 at 6:59
  • @code using CSS gradients of course? – Vikas Jun 15 at 7:07
  • 2
    2 box-shadows?. – Joonas Jun 15 at 7:08
  • @Joonas That one is for inset and outset, which wouldn't really work... – code Jun 15 at 21:57
  • @code, I mean obviously the code is specific to the question OP asked. You can edit the CSS to fit your needs. Remove the word inset and it's no longer inset. Of course even after that edit it's not exactly like your shadow, but it's just simple number values you have to adjust to mimic the shadow example above. The main point of that link was to tell you that you can add more than one box-shadow in a single element by separating each shadow with a comma. – Joonas Jun 15 at 22:05
3

I have a few suggestions:

  1. Apply the dark shadow but don't worry much about it being not much visible. On fully dark black background (e.g. #000000), you can't create any dark grey shadow that's darker than background. It could be almost true in real world.

    Also, you say it disappears completely, but I can still see some of it when I tried it. Maybe the shadow you've applied is not totally opaque?

    enter image description here

    With a slightly light background, it is even more visible:

    enter image description here

  2. If you can't avoid shadow, you can try the colorful shadow trend if you want, something like this. It will look slightly less odd as compared to grey shadow for a blue object. (It will still look as a glow though)

    enter image description here


Apart from this, the one suggested in the other answer, is actually a solution to your problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.