Misbehaving Box Shadows

<!-- I thought that as long as the first 2 elements (the X and Y) were positive, the shadow would always be to the R and Bottom of the element that it is applied to. This holds true for the lower picture where we have X=10 Y=10 but when the X and Y are cranked up to 50, the shadow spills out equally to all aspects of the element. Is it impossible to have 50 value for X and Y and still have the shadow confined to the R and Bottom of the picture? -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Playing Wi</title>
    <style>
        .bottom-pic {
            position: relative;
            top: 200px;
            left: 100px;
            width: 300px;
            box-shadow: 10px 10px 10px 10px rgba(2,15,14, 0.408)
        }
        img {
            position:relative;
            top: 100px;
            left: 100px;
            width: 300px;
            box-shadow: 10px 10px 50px 50px rgba(2,15,14, 0.408)
        }
    </style>
</head>
<body>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJrLHb-21E-xoUiA4piGnJxCM1avZG_YKGtw&usqp=CAU" alt="one israel"><br>
    <img class="bottom-pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFU8HdgCJC9gO08MCkPJuEtDf2IsOqrz_WrQ&usqp=CAU" alt="2 israel">
    
</body>
</html>

Both of your pics have the required horizontal and vertical offset set to 10px.

The difference you’re seeing is in the top pic you apply 50px to the required blur radius and another 50px to the optional spread radius. In other words, the X and Y are not cranked up to 50px.

Ahh - who knew? So what you are saying is that the X and Y values have to be
≧ to the blur radius and the spread radius. I tried that and indeed that is the answer. Thanks!