Now, if I understand what you are trying to do…

Your HTML should look like this:

<div id='container'>
    <div class="col-md-6 homeTiles image1"></div>
    <div class="col-md-6 homeTiles homeTextTile1"></div>
    <div class="col-md-6 homeTiles homeTextTile2"></div>
    <div class="col-md-6 homeTiles image2"></div>
    <div class="col-md-6 homeTiles image3"></div>
    <div class="col-md-6 homeTiles homeTextTile3"></div>
    <div class="col-md-6 homeTiles homeTextTile4"></div>
    <div class="col-md-6 homeTiles image4"></div>
</div>

Essentially, I see nothing wrong with your HTML, besides the formatting.

Then your CSS which is what you are using the boxes shadows should look like this:

#container {
     display: flex;
     flex-wrap: wrap;
     margin-top:100px;
     margin-bottom:100px;
}
 .homeTiles {
     height:266px;
    width:50%;
     overflow:auto;
     background:yellow;
}
 .image1 {
     box-shadow: 0 0 grey;
}
 .image2 {
     box-shadow: 0 0 grey;
}
 .image3 {
     box-shadow: 0 0 grey;
}
 .image4 {
     box-shadow: 0 0 grey;
}
 .homeTextTile1 {
     box-shadow: 0 0 grey;
}
 .homeTextTile2 {
     box-shadow: 0 0 grey;
}
 .homeTextTile3 {
     box-shadow: 0 0 grey;
}
 .homeTextTile4 {
     box-shadow: 0 0 grey;
}

Now what you should do from here is look at each box and decide how you want the shadow to come out, in terms of length.

The box-shadow property in CSS has a “x” and “y” value syntax. As you can see here. However, you can add a size of the shadow and blur property by including two more sets of numbers.

So it goes:
box-shadow: x-value y-value blur-radius spread-radius shadow-color;
box-shadow: 6px 10px 12px 15px grey

So if the way I am looking at your code is correct, your CSS should be:

#container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  margin-bottom: 100px;
}

.homeTiles {
  height: 266px;
  width: 50%;
  overflow: auto;
  background: yellow;
}

.image1 {
  box-shadow: -6px -10px grey;
}

.image2 {
  box-shadow: 6px 0 grey;

}

.image3 {
  box-shadow: -6px 0 grey;
}

.image4 {
  box-shadow: 6px 10px grey;
}

.homeTextTile1 {
  box-shadow: 6px -10px grey;
}

.homeTextTile2 {
  box-shadow: -6px 0 grey;
}

.homeTextTile3 {
  box-shadow: 6px 0 grey;
}

.homeTextTile4 {
  box-shadow: -6px 10px grey;
}

But if you want all the shadows to intersect and not overlap over each of the boxes, it would be best to assign the shadow to parent. As shown below:

.container {
  box-shadow: -6px 10px grey;
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  margin-bottom: 100px;
}

.homeTiles {
  height: 266px;
  width: 50%;
  overflow: auto;
  background: yellow;
}

You just have to continue adjusting till you get what you want. However, you can use online tools such as this one to help you with that.

I know there are alot of questions and answers on this one but not like mine i think. Nothing worked and i tried alot.

Here is my code and i have a JSFiddle below, please check it out!

<style>
        #container {
            display: flex;
            flex-wrap: wrap;
            margin-top:100px;
            margin-bottom:100px;
        }
         .homeTiles {
           height:266px;width:100%;
           overflow:auto;
           background:yellow;
      }
        .image1 {
            box-shadow: -6px -6px 22px 6px grey;
    }
        .image2 {
            box-shadow: 6px 6px 22px 6px grey;
        }
        .image3 {
            box-shadow: -6px 6px 22px 6px grey;
        }
        .image4 {
            box-shadow: 6px 6px 22px 6px grey;
        }

        .homeTextTile1 {
            box-shadow: 6px -6px 22px 6px grey;
        }
        .homeTextTile2 {
            box-shadow: -6px 6px 22px 6px grey;
        }
        .homeTextTile3 {
            box-shadow: 6px 6px 22px 6px grey;
        }
        .homeTextTile4 {
            box-shadow: -6px 6px 22px 6px grey;
        }
</style>

<div id='container'>
<div class="col-md-6 homeTiles image1"></div>
     <div class="col-md-6 homeTiles homeTextTile1">
     </div>
     <div class="col-md-6 homeTiles homeTextTile2">
</div>
         <div class="col-md-6 homeTiles image2"></div>
         <div class="col-md-6 homeTiles image3"></div>
             <div class="col-md-6 homeTiles homeTextTile3">
            </div>
             <div class="col-md-6 homeTiles homeTextTile4">
         </div>
                 <div class="col-md-6 homeTiles image4"></div>
             </div>

I changed .homeTiles {width:100%;} to .homeTiles {width:50%;} because the JsFiddle output square is little. Now you can see clear how it looks for me. As i said i don’t want shadows on the inside of the div’s (see JsFiddle then you know what i mean). I only want shadows on the outside of every div(like it is already but i want it minus the inside shadows on div’s).

https://jsfiddle.net/rhpskcu3/

Thanks!