Box shadow on items in owl carousel being cut off

To answer my own question. A workaround for this would be to set overflow: visible on the outer stage. Hiding all none active elements with opacity 0 and then for smoothness transition the opacity.

.owl-stage-outer { 
overflow: visible;
}

 .owl-item {
   opacity: 0;
   transition: opacity 500ms;
}
.owl-item.active {
  opacity: 1;
}

.

A bit late to the answers on this but for anyone still wondering:

Assuming this a carousel of multiple items, add some margin to the owl stage wrapper:

.owl-stage{
  margin: 24px;
  overflow: visible;
}

Then only apply the box shadow to the active items, with a transition for effect on change:

.owl-item {
   box-shadow: 0;
   transition: 1s all;
   webkit-transition: 1s all;
}
.active {
   box-shadow: 0 0 14px 0 rgba(74,74,74,0.20);
}

In my case I had a carousel of three items so when the box shadow was applied to owl items it was messy and looked cut off, the method above rectifies that.

Or you can try add margin to class:

.owl-stage{
    margin: 30px;}