Gradient transitions don't smoothly change with @property

[teflocarbon]

trafficstars

My Home Assistant version: 2022.5.5

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Trying to use @property to transition a gradient

What I expected to happen: The gradient transitions smoothly as it does so in Codepen

What happened instead: The gradient does not transition smoothly and jumps to the other gradient with no transition.

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
type: entities
style: |
  }
  h1.card-header {
    padding: 10px;
    margin-top: -4px
  }
  #states {
    padding: 10px;
  }
  @property --lemons {
    syntax: '<color>';
    inherits: false;
    initial-value: red;
  }
  ha-card {
    background: radial-gradient(var(--lemons),blue);
    transition: all 3.0s;
    {% if is_state('light.pikachu_lamp','on') %}
    --lemons: red;
    {% else %}
    --lemons: blue;
    {% endif %}
  }
# End of code

Error messages from the browser console: N/A

---

By putting an X in the boxes ([]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [x] Have made sure I am using the latest version of the plugin.

• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[Olegz73]

+1 have the same trouble after last update.

[ildar170975]

1. What card are you trying to style? It is not specified in the issue.

2. Regarding this:

style: |
  {
    padding: 0px;
  }

Where is a selector for this style?

[thomasloven]

The codepen doesn't transition smootly either if you change

transition:--c 0.5s;

to transition: all ...