Why won't CSS 'overflow-x' and 'overflow-y' work on box-shadows? Is this a bug?

Question

I'm not sure whether this is an implementation bug or I'm misunderstanding how box-shadow relates to overflow-x and overflow-y. I'm guessing it's not a bug because I can confirm this on Chrome, Firefox, and Safari.

box-shadow seems to be all-or-nothing when it comes to the overflow property. overflow: hidden works on box-shadows, overflow: visible works too... But

overflow-x: hidden;
overflow-y: visible;

... does not work. The browser simply hides both the x and y-axes. Expected behavior, in my opinion, would be that the box-shadow on the x-axis is hidden while the box-shadow on the y-axis is visible.

Here's what I mean, as well as a CodePen:

body {padding: 0; margin: 0;}.container {background: dimgray;display: flex;align-items: center;justify-content: center;width: 100vw;height: 100vh;}

.orangeSquare {
  background: orange;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  overflow-x: hidden;
  overflow-y: visible; /* why doesn't this work? */
 
}

.tealRectangle {
  background: teal;
  color: white;
  width: 92px;
  height: 92px;
  line-height: 92px;
  text-align: center;
  
  box-shadow: 0 0 85px 15px black;
}

<div class='container'>
  <div class='orangeSquare'>
    <span class='tealRectangle'>—</span>
  </div>
</div>

Any ideas as to why this is happening? Or am I missing something obvious? A workaround would be appreciated as well. Thanks!

Answer 1

A simple workaround for a box shadow on a single side is to add a positioned pseudo-element with a gradient background which fades to transparent.

e.g. for a shadow below (add cross-browser gradient stuff)

.cropped-shadow {
	position: relative;
	z-index: 5; 
	background: #fc0;
	height: 70px;
}

.cropped-shadow:after {
	content:" ";
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	height: 10px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%);
}

<div class="cropped-shadow"></div>