Rendering of drop-shadow effect on ios devices

Configuration Frontend
1

I am using custom button card with a “glow” effect that is achieved using the drop-shadow css style. the code for the button is:

type: custom:button-card
layout: vertical
icon: mdi:theater
show_entity_picture: false
name: Cinema
state:
  - value: 'on'
    color: white
    styles:
      card:
        - background: rgb(255, 88, 10, 0.7)
        - filter: >-
            drop-shadow(0px 0px 7px white) drop-shadow(0px 0px 10px orange)
            drop-shadow(0px 0px 10px orange)
      name:
        - font-size: 12px;
      icon:
        - color: white
  - value: 'off'
    color: lime
    styles:
      card:
        - background: rgb(10, 10, 10, 0.4)
      name:
        - font-size: 12px;
        - color: rgb(255, 88, 10, 0.8)
      icon:
        - color: rgb(255, 88, 10)
      label: null
tab_action:
  action: toggle
entity: light.cinema_lights
alignment: center

The effect is shown as expected when viewing the dashboard from Chrome on a Windows PC. However, when using HA app on ios devices the glow effect is rendered differently. See below:

pc
ipad

Looking for suggestions how to fix it.

2

You appear to be missing the spread radius parameter. Try this

state:
  - value: 'on'
    color: white
    styles:
      card:
        - background: rgb(255, 88, 10, 0.7)
        - filter: >-
            drop-shadow(0px 0px 7px 3px white) drop-shadow(0px 0px 10px 3px orange)
            drop-shadow(0px 0px 10px 3px orange)
      name:
        - font-size: 12px;
      icon:
        - color: white
3

Thank you but it does not work at all. The effect disappears.

4

Try this:

    styles:
      card:
        - box-shadow: 0px 0px 10px 3px orange
5

Perfect! Thank you