Add a box-shadow to the card

[ildar170975]

Currently the card:

• does not allow to show box-shadows for child cards;
• does not have it's own box-shadow.

type: custom:swipe-card
cards:
  - type: button
    entity: sun.sun
  - type: button
    entity: zone.home

---

Workarounds: (only useful if inserted cards occupy the whole area of the swiper-card) 1) Insert the card into custom:stack-in-card:

type: custom:stack-in-card
cards:
  - type: custom:swipe-card
    cards:
      - type: button
        entity: sun.sun
      - type: button
        entity: zone.home

which is not a perfect solution since the stack-in-card does not seem to be maintained.

2) Insert the card into custom:mod-card:

type: custom:mod-card
card:
  type: custom:swipe-card
  cards:
    - type: button
      entity: sun.sun
    - type: button
      entity: zone.home
card_mod:
  style: |
    ha-card {
      box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
    }

which is not a perfect solution since you have to hardcode a currently default style for box-shadow.

[Mariusthvdb]

3d option (which I use) is have the cards all have their own style/box-shadow setting. in my swiper configs, they are all based on the same button-card template, so not much to configure

btw, never checked myself, but did you try: https://swiperjs.com/swiper-api#param-cardsEffect-slideShadows ?

[ildar170975]

3d option (which I use) is have the cards all have their own style/box-shadow setting

No, it does not help. Initially inserted cards may already have their own box-shadow properties. Their shadows just cannot be seen since they are overlapped by swipe-card. To be sure - check this example:

type: custom:swipe-card
cards:
  - type: entities
    entities:
      - sun.sun
    card_mod: &ref_0
      style: |
        ha-card {
          box-shadow: var( --ha-card-box-shadow,0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
          color: red;
        }
  - type: entities
    entities:
      - zone.home
    card_mod: *ref_0

As you can see the inserted cards have a shadow property: but it is not visible:

The parent swipe-card is clipping borders of inserted cards due to it's overflow: hidden style.

[Mariusthvdb]

must check that, because I hadnt noticed in my setup:

ofc, I have a minimal box-shadow (must correct myself above, it is not defined in the button_card_templates, but in my theme settings):

    ha-card-border-radius: 0px
    ha-card-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)

as you can see, the radial background is shining through nicely

[ildar170975]

All checks I usually do with a default theme to be sure that my themes do not affect the output. Cannot say anything about your example since you are using a custom theme.

[ildar170975]

btw, never checked myself, but did you try: https://swiperjs.com/swiper-api#param-cardsEffect-slideShadows ?

Here are my tests:

1. Effect=cards: No shadows visible.

2. Effect=flip: Shadows=OK.

3. Effect=coverflow: Shadows are visible only during swiping.

As for "creative" - did not manage to specify a creativeEffect object. In my test it seems to work like a "cards" case:

[ildar170975]

Finally:

1. This is not a "no box-shadow" problem. This is a "swipe-card is clipping other' cards' borders".

2. If swipe-card does not contain any stacks - use one of these solutions:

   • place the swipe-card inside stack-in-card (here);
   • use card-mod (here);
   • use slideShadows: true (works only with effect: flip) (here)

3. If swipe-card contains a stack - then there is no universal solution, it is to be found dependingly on a particular case)))

[estevez-dev]

If you have multiple slidesPerView cards, you can add an additional margin for each inner card inside swipe-card with card-mod:

    card_mod:
      style: |
        ha-card {
          margin: 3px;
        }

[damru]

To avoid the shadow being hidden with coverflow effect, you can use the new dictionary syntax of card mod to handle shadow DOM:

type: custom:mod-card
card:
  type: custom:swipe-card
  parameters:
    effect: coverflow
  cards:
    - type: button
      entity: sun.sun
    - type: button
      entity: zone.home
style:
  swipe-card$: |
    .swiper-container {
      margin: -2px !important;
      padding: 2px !important;
    }

[cloudbr34k84]

Hey all, how would i go about fixing the box shadow on my mushroom cards which make up 1 big card

type: custom:swipe-card
start_card: 1
parameters:
  autoHeight: false
  initialSlide: 0
  centeredSlides: true
  effect: coverflow
  loop: false
  preventClicksPropagation: true
  preventClicks: true
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: null
        subtitle: Favourite Sensors
      - square: false
        columns: 3
        type: grid
        cards:
          - type: custom:mushroom-template-card
            primary: Climate
            secondary: >-
              {{ states('sensor.downstairs_average_humidity')}} % / {{
              states('sensor.downstairs_average_temperature')}} °C
            icon: mdi:water-thermometer
            icon_color: '#A6ACAF'
            tap_action:
              action: none
          - type: custom:mushroom-template-card
            secondary: '{{ states(''sensor.fronius_live_power_flow_kwh'')}} kWh'
            primary: Power Flow
            icon: '{{ state_attr(''sensor.fronius_live_power_flow_kwh'', ''icon'') }}'
            entity: sensor.fronius_live_power_flow_kwh
            icon_color: '#A6ACAF'
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            fill_container: false
            multiline_secondary: true
            badge_color: ''
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;}

[ingeniumdesign]

same problems

[antonio1475]

1. Insert the card into custom:stack-in-card:

type: custom:stack-in-card
cards:
  - type: custom:swipe-card
    cards:
      - type: button
        entity: sun.sun
      - type: button
        entity: zone.home

which is not a perfect solution since the stack-in-card does not seem to be maintained.

Using the "successor" custom:vertical-stack-in-card works perfectly. Thank you for the workaround

type: custom:vertical-stack-in-card
cards:
  - type: custom:swipe-card
    cards:
    - type: 'custom:button-card' 
      template:
        - custom_card_room_8
        - yellow_on
      name: Entrada
      entity: light.entrada
      icon: mdi:door-closed

    - type: picture-glance
      camera_view: live
      entities: []
      camera_image: camera.entrada_hd
      aspect_ratio: '1'
      card_mod:
        style: |
          div.box {display:none; }

Only the bottom one (Entrada) is in a custom:vertical-stack-in-card

Without (issue):

[andrezpt]

1. Insert the card into custom:stack-in-card:

type: custom:stack-in-card
cards:
  - type: custom:swipe-card
    cards:
      - type: button
        entity: sun.sun
      - type: button
        entity: zone.home

which is not a perfect solution since the stack-in-card does not seem to be maintained.

Using the "successor" custom:vertical-stack-in-card works perfectly. Thank you for the workaround

type: custom:vertical-stack-in-card
cards:
  - type: custom:swipe-card
    cards:
    - type: 'custom:button-card' 
      template:
        - custom_card_room_8
        - yellow_on
      name: Entrada
      entity: light.entrada
      icon: mdi:door-closed

    - type: picture-glance
      camera_view: live
      entities: []
      camera_image: camera.entrada_hd
      aspect_ratio: '1'
      card_mod:
        style: |
          div.box {display:none; }

Only the bottom one (Entrada) is in a custom:vertical-stack-in-card

Without (issue):

can you share the code of your cards? :)