5

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.

Improve this question
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
    Commented Jun 15, 2021 at 4:17
  • @Kyle so there is no other solution.
    – code
    Commented Jun 15, 2021 at 4:26
  • You cant make device minimum darker yes.
    – joojaa
    Commented Jun 15, 2021 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
    Commented Jun 15, 2021 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
    Commented Jun 15, 2021 at 6:56

4 Answers 4

Reset to default
12

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

Improve this answer
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
    Commented Jun 15, 2021 at 6:59
  • @code using CSS gradients of course?
    – Vikas
    Commented Jun 15, 2021 at 7:07
  • 2
    2 box-shadows?.
    – Joonas
    Commented Jun 15, 2021 at 7:08
  • @Joonas That one is for inset and outset, which wouldn't really work...
    – code
    Commented Jun 15, 2021 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
    Commented Jun 15, 2021 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.

Improve this answer
0

Here's an HTML/CSS example based on @kyle's answer!

<html>
<head>
    <style>
        body {
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
        }
        .parent {
            position: relative;
            z-index: 1;
            border-radius: 100%;
            box-shadow: 0px 10px 100px 25px #28283d;
        }
        .child {
            display: flex;
            width: 200px;
            height: 200px;
            background: #0e0ec7;
            border-radius: 100%;
        }
        .child::after {
            content: "";
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            position: absolute;
            border-radius: 100%;
            box-shadow: 0 20px 25px -5px #000, 0 8px 10px -6px #000;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

Box shadow on black background

Improve this answer
1
  • 1
    Not exactly sure what's the necessity of all the extra elements and pseudoelements; why not just one div? jsfiddle.net/qxd42kLw
    – code
    Commented Jun 20, 2023 at 22:29
0

I would suggest to try the shadow inside the shape. It's like you give more light on the shape.

You can use specific css property inset.

Just put it at the end of line: box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.75) inset;

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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