Ionic-popover --box-shadow

I can’t find out where I have to put --box-shadow css custom property.
I tried in the scss file of the component, of the hosting page, in the global scss… but I can’t see any shadow.
Any help is appreciated


how did you try it?

ion-popover { 
  --box-shadow: //value here


The Ion Popover Controller can have a css Class. Try maybe to declare a css Class globally, with the box shadow, and give this class to the popover.

Oh, yeah!
In the scss of the popover, in that of the hosting page and in global css, too!

How can I assign a class to the popover? Thanks!

You are creating the Popover with the Popover Controller right? There in the options must be an option for cssClass:

Yes, I know. But where I have to put the css value? In the scss file of the popover, of the host page, where?

Try to put it in your global scss file. I think it is under theme?

I tried in:
variables.scss under theme

ion-popover { 
  --box-shadow: 50px;


.ion-popover { 
  --box-shadow: 50px;

I also tried with a new class, but I can’t understand where I have to put it: popover never appears in html files…


Could it be, that you’re testing on an iOS (emulated) device?

If you take a look at the latest master branch of the Ionic source code, popover component, the CSS variables, you’re using are correct:

The generic popover CSS includes it:

The android platform specific CSS too:

The iOS platform specific CSS not:

That means, that Ionic does not provide any box shadows CSS variables for iOS platforms, proof it here:

Without testing it by myself, could you check it?

Hope it helps.