Box-shadow never shows up through custom CSS, almost all other properties do.

I use a good amount of custom CSS on my site, but box-shadow never comes through on my published page. I'm able to see it while editing and it all behaves exactly as expected. Then I save and go to my published site and any other changes I've made appear, except box-shadow.

Does anyone know why this happens? Curious if there's some error or if I'm just totally missing something important. I've also tried using !important and not using it and it still doesn't work.

I'm using the .plyr class selector to target my video in this instance, and everything shows except box-shadow.

.plyr {
  border-radius: 0.7em !important;
  box-shadow: 0px 50px 50px #00000050 !important;
}

.plyr:hover {
  box-shadow: 0px 3px 5px #00000050;
  translate: 0px -5px 0px;
  transition: ease 0.2s;
}

Would appreciate any help or insight into my issue here!

Can you share your website URL?

Try using this class instead of .plyr:

.sqs-video-wrapper

Oh cool, I'll try that. But I still have issues on other things like buttons or images.

www.richecreative.com

10 hours ago, RicheCreative said:

But I still have issues on other things like buttons or images.

Like what?

Box shadows never show up in any browser when I'm on the actual website, however they are visible within the editor.

For example, on another site I use this custom css: 

.user-items-list-carousel__media-inner  {
  border-radius: 1em!important;
  box-shadow: #00000030 0px 10px 20px;
}

And each carousel photo looks like this in my editor preview:

Which is exactly what I want it to look like.

However once I load it in chrome, chrome incognito mode, or safari in private browsing it looks like this:

And inspect shows this:

Saying that it's an invalid property value.

Your box-shadow value has a syntax error.

box-shadow : 0px 10px 20px #000;

Let us know how it goes.