box-shadow

[flashiflashi]

I would like a linear-gradient on a box-shadow.
I have several light entities I would like to display the colors linearly.
this code only works in edit mode why? is there any other solution?

type: custom:bubble-card
card_type: button
entity: light.salon
styles: |
.bubble-button-card-container {
overflow: visible;
}
.bubble-button-card-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, blue, red, green);
filter: blur(15px);
z-index: -1;
}

THANKS

[zyi840449]

try this?

styles: |
  .is-on .bubble-icon {
   color: rgba(80, 205, 255, 1) !important;
  }
  .bubble-range-fill { 
   background: linear-gradient(to right, rgba(50, 200, 255, 1), rgba(50, 200, 255, 1), rgba(50, 200, 255, 1), rgba(255, 255, 255, 0.1)) !important;
   opacity: 1 !important;
  }