# What's With Box-Shadow? **URL:** \ **Category:** Uncategorized\ **Created:** [December 31, 2020, 4:04pm UTC](https://forum.kirupa.com/t/whats-with-box-shadow/645527 "2020-12-31T16:04:55Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [December 31, 2020, 4:04pm UTC](https://forum.kirupa.com/t/whats-with-box-shadow/645527/1 "2020-12-31T16:04:55Z")
![Screen Shot 2020-12-31 at 9.03.47 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/b/b135b24b1282bb185ed32727945fceec2eaf7264.jpeg) ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [December 31, 2020, 4:14pm UTC](https://forum.kirupa.com/t/whats-with-box-shadow/645527/2 "2020-12-31T16:14:24Z")
Alright, you’re killing me with these images with text in them 😩 ---
**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [December 31, 2020, 6:50pm UTC](https://forum.kirupa.com/t/whats-with-box-shadow/645527/3 "2020-12-31T18:50:49Z")
Oh - I thought that giving you a presentation of the problem in this manner - here is the code - here is the result - was the clearest way to illustrate the problem - a real life example of the issues that I am having. What should I be doing? ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [December 31, 2020, 7:13pm UTC](https://forum.kirupa.com/t/whats-with-box-shadow/645527/4 "2020-12-31T19:13:24Z")
Sure, that’s great, but half the time I can’t read the text thats in the image 😉 . That and it’s not copyable, quotable, or searchable. If you have an explanation and/or code, it would be _extremely_ helpful to type it out in the forum as text and not include it in an image. Images dispersed throughout that text is fantastic, just so long as the text itself isn’t in the image. ---
**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [January 1, 2021, 3:49pm UTC](https://forum.kirupa.com/t/whats-with-box-shadow/645527/5 "2021-01-01T15:49:51Z")
OK - point taken and I will endeavour to be a good little poster to the forum in the future. I was hoping to replicate my original issue with the box-shadow rule but now find that before I can do that, I have another problem that needs to be addressed first - namely - I have 2 identical images. I thought that to mark them as different for purposes of CSS, I gave the lower one an - id=“lemming” - but that differentiator does not seem to work. Changes made in CSS under the - lemming - id, don’t come across in the browser. I can’t figure out why. Once I do, I’ll go on to the box-shadow issue. Here’s the code - I seem to have issues with copy / pasting my code as well but I’ll copy from VSC, paste into this box, use the - preformatted text - button and hope that it comes through as - copyable, quotable and searchable. I have used the Format Document (a newly learned feature for me) feature so hopefully my code is viewed more easily than previously. ``` Messing With Page Layouts

Road Construction Equipment

Specialized Winter Usage

But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to international competitors, in large part because there’s been little direct government support in Canada, industry executives say.

Charles Fipke Stewart Blusson
``` ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [January 2, 2021, 10:57am UTC](https://forum.kirupa.com/t/whats-with-box-shadow/645527/6 "2021-01-02T10:57:44Z")
> [@John\_Stern](#): > > I thought that to mark them as different for purposes of CSS, I gave the lower one an - id=“lemming” - but that differentiator does not seem to work. You’re using “.lemming” in your css which is looking for the class lemming, not the id. For an id your css needs to use “#lemming” 😉 🥳 ---
**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [January 2, 2021, 4:07pm UTC](https://forum.kirupa.com/t/whats-with-box-shadow/645527/7 "2021-01-02T16:07:40Z")
Arrrgh ! ! Would you believe that I knew the answer to that ? I must be working too long at this at one sitting not to have caught this myself - but thanks for pointing it out because I sure couldn’t see it when I was trying to get at the cause of the problem. So on to part 2 at last - I’ll copy the “corrected code” ``` Messing With Page Layouts

Road Construction Equipment

Specialized Winter Usage

But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to international competitors, in large part because there’s been little direct `Preformatted text`government support in Canada, industry executives say.

Charles Fipke Stewart Blusson
``` so the question now is - looking only at the box shadow component for the 2 images, a +ve value for X and Y should mean that the shadow falls to the Right and Bottom of the image. This holds true for the top image where we have ` box-shadow: 10px 10px 10px 10px rgba(27, 221, 147, 0.408);` but for the bottom image where we up the radius-blur and radius-spread as shown ` box-shadow: 20px 35px 40px 40px rgba(27, 221, 147, 0.408);` the shadow spills out on all aspects of the image - top, bottom, left, right. How come the +ve X and Y values don’t serve to constrain the shadow to the Right and Bottom in this case? ![Screen Shot 2021-01-02 at 9.07.02 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/6/63eb56ccb480fbda624ec7cb9b66e255d881f463.jpeg) ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [January 2, 2021, 5:01pm UTC](https://forum.kirupa.com/t/whats-with-box-shadow/645527/8 "2021-01-02T17:01:52Z")
> [@John\_Stern](#): > > Would you believe that I knew the answer to that ? Of course! I still do this. And this time won’t be the last. But the next time it happens you’ll now be able to think back to this moment and realize what the problem might be! As for the shadow, the x and y are just an offset shift. They don’t constrain anything. They simply take the rendered shadow and move it left, right, up, and/or down. Depending on the other shadow settings, the shadow can still be large enough to bleed out from all edges. You might want to try googling a css shadow tool. I bet someone out there made a tool that lets you easily change shadow settings to more easily visualize what’s going on. ---
**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\ **Post date:** [January 2, 2021, 5:56pm UTC](https://forum.kirupa.com/t/whats-with-box-shadow/645527/9 "2021-01-02T17:56:40Z")
Good - I am now OK with the subtleties of shadowing. I thought I was missing something when the shadows appeared on the Top and Left but no - that was normal for the values given.