Might be a niche use case:
I wanted a way to see the fluid level in my watering tank, so I used the background to represent the fluid level:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: linear-gradient(0deg, rgba(96, 125, 139, 0.3) calc( {{ states('sensor.wassertank') }}% / 0.62 ), rgba(96, 125, 139, 0.12) 0.1%) !important;
}
This effectively sets the background to a gradient with minimal transition. !important is used as usual to overwrite the background color.