Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[Vandana (Vandana Dass)]

type: custom:mushroom-template-card
primary: ''
icon: mdi:fountain
icon_color: amber
entity: switch.fountain
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{  (states("counter.fountain_timer"))|int*100 }}% 0%, var(--card-background-color) 0% 100%);
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity, 'on') %}
          animation: fountain 1.5s ease infinite;
        {% endif %}  
      }  
      mushroom-shape-icon:after {
        content: '24';
        position: absolute;
        top: -11%;
        right: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 9px;
        font-weight: 700;
        background-color: rgba(var(--rgb-amber), 0.5);
        border-radius: 50%;
      }
      @keyframes fountain { 
        0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
        50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
        60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
        70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
        80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
      }  
      ha-card {
         padding: 5px 0px 0px 0px !important;
      }    
      :host {
        --icon-size: 35px !important; 
        --card-primary-font-size: 9px !important;
        --card-secondary-font-size: 9px!important;
      }

please check the code, what am I doing wrong, The icon background colour is not showing like below icon

[dimitri.landerloos]

Nothing wrong. Thats what i showed you would happen.

You can get it back if you set a color like this:

--card-background-color: rgba(87, 72, 30, 1);

But you have to set a static color. Otherwise it will not work. The color also has to have 100% opacity (hence the 1 at the end).

type: custom:mushroom-template-card
primary: ''
icon: mdi:fountain
icon_color: amber
entity: switch.fountain
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --card-background-color: rgba(255, 255, 30, 0.5);
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{  (states("counter.fountain_timer"))|int*100 }}% 0%, var(--card-background-color) 0% 100%);
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity, 'on') %}
          animation: fountain 1.5s ease infinite;
        {% endif %}  
      }  
      mushroom-shape-icon:after {
        content: '24';
        position: absolute;
        top: -11%;
        right: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 9px;
        font-weight: 700;
        background-color: rgba(var(--rgb-amber), 0.5);
        border-radius: 50%;
      }
      @keyframes fountain { 
        0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
        50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
        60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
        70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
        80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
      }  
      ha-card {
         padding: 5px 0px 0px 0px !important;
      }    
      :host {
        --icon-size: 35px !important; 
        --card-primary-font-size: 9px !important;
        --card-secondary-font-size: 9px!important;
      }

[Mngsps]

Hello,

I’m not getting the icon shape color changed. I used the code form the mushroom style guide thread:

Any idea?

Thank you, a lot, for helping.
Kind regards
Benedikt

[Littlejoe (Vanhack)]

Can I see the code for the house temp card please? Thanks.

[Intro_Verti]

Found it and put celcius/percentage in it as well.
Thanks for the initial config @PskNorz !

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Kantoor
    secondary: >-
      {{ states('sensor.office_temperature') | round(1) }}°C  | {{
      states('sensor.office_humidity') }} %
    icon: mdi:thermometer-water
    card_mod:
      style: |
        ha-card {
          z-index: 1;
          --ha-card-border-width: 0;
        }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.office_temperature
        name: Temperature
        color: green
      - entity: sensor.office_humidity
        name: Humidity
        color: '#3399ff'
        y_axis: secondary
    height: 50
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
        }

[dimitri.landerloos]

Hopefully this should clear it up

@dimitri.landerloos

Yes, we have found that for some it only applies the color using the --shape-color variable when the state is on for the entity in the card. can you test if this is the case?

if you want to change the color regardless of state just do this instead:

entity: vacuum.dreamebot_l10s_ultra
type: custom:mushroom-vacuum-card
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: blue !important;
      }

[Mngsps]

This was the solution Thank you! Didn’t see this post berfore… Once we’re in touch: Is it possible to have a shadow for the icon itself (not the shape)?

[Vandana (Vandana Dass)]

Thank you so very much.

How can i achieve the same thing if i use mushroom chip?

Can you plz share the code.

Regards

[Littlejoe (Vanhack)]

Love it, thank you.

[Intro_Verti]

Oeh, another evolvement
What did you do with it?

[j.otte]

hi its al work now i am so happy, thank for you helping
the washing machine its work and the microwave,

- type: custom:mushroom-template-card
            icon: mdi:microwave
            entity: switch.magnetron
            icon_color: |-
              {% if states("sensor.magnetron_watt") | float(0) > 5 %}
                green
              {% endif 
            secondary: |2

                    {{ states("sensor.magnetron_watt") }} watt | 
                    {{ states("sensor.magnetron_kwh") }} kwh  
            layout: vertical
            primary: Magnetron
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-state-icon:before {
                  content: "";
                  position: absolute;
                  width: 25%;
                  height: 25%;
                  margin: 10%;
                  animation: cook 1s linear infinite; if states('sensor.magnetron_watt') | float > 4 }}
                }
                @keyframes cook { 
                  0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
                  33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
                  66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
                }

and the washing machine

- type: custom:mushroom-template-card
            primary: Wasmachine
            secondary: |2

                    {{ states("sensor.wasmachine_watt") }} watt | 
                    {{ states("sensor.wasmachine_kwh_per_dag_2") }} kwh
            icon: >-
              {{ 'mdi:washing-machine'if states('sensor.wasmachine_watt') |
              float(0) > 5 else  'mdi:washing-machine' }}
            entity: input_boolean.wasmachine
            layout: vertical
            icon_color: |-
              {% if states("sensor.wasmachine_watt") | float(0) > 5 %}
                green
              {% endif %}
            tap_action:
              action: more-info
            double_tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  dismissable: true
                  autoclose: false
                  content:
                    type: custom:plotly-graph
                    entities:
                      - entity: sensor.wasmachine_watt
                    refresh_interval: 10
                    hours_to_show: 12h
                    layout:
                      xaxis:
                        rangeselector:
                          'y': 1.2
                          buttons:
                            - count: 1
                              step: minute
                            - count: 1
                              step: hour
                            - count: 12
                              step: hour
                            - count: 1
                              step: day
                            - count: 7
                              step: day
            card_mod:
              style: |
                ha-state-icon {
                  {{'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_watt') | float > 5 }}
                  transform-origin: 50% 110%;
                }
                @keyframes shake {
                  0%, 100% { transform: translate(0, 0) rotate(0); }
                  20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
                  40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
                  60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
                  80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
                }
                @keyframes drum {
                  50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
                }

[j.otte]

have somebody voor me ah good works heat pump animated card?
thanks for sharing of helping

we have this code change but he is not working,

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:heat-pump-outline
    icon_color: yellow
    primary: Heat Pump
    card_mod:
      style: |
        ha-icon {
            clip-path: polygon(0% 0%, 0% 100%, 23% 100%, 23% 23%, 78% 22%, 77% 78%, 23% 78%, 22% 100%, 100% 100%, 100% 0%);
          }
  - type: custom:mushroom-template-card
    icon: mdi:heat-pump-outline
    icon_color: green
    card_mod:
      style: |
        ha-state-icon {
            position: absolute;
            {{'animation: spin 2s linear infinite;''
            clip-path: circle(27.3% at 50% 50%);
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

[dimitri.landerloos]

Yes its possible. But not with box-shadow. Else you will get this:

You have to use a filter and drop-shadow. Which is not actually creating a shadow around an object but simulates it for an object with transparency such as a png or an svg. Like this:

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
  style: |
    ha-state-icon {
      filter: drop-shadow(0 0 5px red);
    }

filters do have some issues with support in some browsers, but i am sure drop-shadow will work just fine in most browsers.

[dimitri.landerloos]

Why couldnt you have asked for this from the beginning if you knew that this is what you wanted. I am not here to do it for you, i am trying to help you achieve what you want, maybe have a look through the guide in my profile to see if you can convert what i have given you already to a chip instead.

[dimitri.landerloos]

If it works it works. Usually many different ways to achieve the same thing with css. So like i say, if it works and works consistently - then i wouldnt change anything.

[quinquelhas (Marco)]

I have tried to change the --secondary-text-color when the state of window is ‘open’, for example, but it doesn’t change
Do you know how I must do ?

{% if states ('cover.velux_external_cover_roller_shutter_2') == 'open'%}
  --secondary-text-color: #00B420;
{% else %}
  --secondary-text-color: #FF483F;
{% endif %}

[dimitri.landerloos]

Try with !important after

{% if states ('cover.velux_external_cover_roller_shutter_2') == 'open'%}
  --secondary-text-color: #00B420 !important;
{% else %}
  --secondary-text-color: #FF483F !important;
{% endif %}

[quinquelhas (Marco)]

I already try, doesn’t work

[dimitri.landerloos]

Hmmm, works with mine. What theme are you using if any?

[quinquelhas (Marco)]

It works, I have put wrong ‘cover’…

Sorry to upset you