Oeh, another evolvement 
What did you do with it?
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); }
}
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;
}
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.
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.
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.
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 %}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 %}
I already try, doesn’t work
It works, I have put wrong ‘cover’… 
Sorry to upset you 
No need to apologise. Btw if you needed a workaround then this should also work
card_mod:
style:
mushroom-state-info$: |
.secondary {
{% if states ('cover.velux_external_cover_roller_shutter_2') == 'open'%}
color: #00B420 !important;
{% else %}
color: #FF483F !important;
{% endif %}
}
.primary {
{% if states ('cover.velux_external_cover_roller_shutter_2') == 'open'%}
color: #00B420 !important;
{% else %}
color: #FF483F !important;
{% endif %}
}
Is like that i have the code…
is better put like you send?
.container {
--card-primary-font-size: 15px;
--card-secondary-font-size: 15px;
--primary-text-color: #FF9800;
{% if states ('cover.velux_external_cover_roller_shutter_2') == 'open'%}
--secondary-text-color: #00B420 !important;
{% else %}
--secondary-text-color:#FF483F !important;
{% endif %}
font-family: Copperplate;Makes no difference really. One changes the variable (–secondary-text-color) and one changes the color of the element (.secondary).
The color of the element (.secondary) is set to the variable by default (so set to --secondary-text-color) if you use the code i sent you just overwrite this. If you use the code you have you just overwrite what the variable is set to instead.
Same result.
I want to do one thing, but I don’t know how to do it
I want to change this button and put in green when is open and red when is closed
I already do that, but it’s change also in this image…
How can I do that works, if possible
Should do it:
card_mod:
style:
mushroom-button$: |
ha-icon {
{% if states(config.entity) == 'open' %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
I have like that
mushroom-button$: |
.button {
background: white!important;
}
ha-icon {
--card-mod-icon-color: #FF9800!important;
}Do you mean you only want to change the button colors for open and closed when the slider is shown? If so i dont think it is possible.
They arent 2 seperate buttons (unfortunately) so they share whatever you apply to them.
Ok no problem…
I thought the same, that it is not possible
I wanted for both chips and template cards. Anyways thanks alot for your help.