card_mod:
style:
.: |
{%- for e in config.entities -%}
{% set val = states(e["entity"]) | float(0) | round(0) %}
bar-card-row:nth-child({{ loop.index }}) bar-card-iconbar {
{% if val >= 70 %}
color: red;
{% elif val >= 63 %}
color: blue;
{% else %}
color: yellow;
{% endif %}
}
{%- endfor %}
2 Likes
Home assistant 2025.5 seems to have broken my bar card implementation.
I think that border-radius is no longer applied so the card is rectangular instead of curved at the edges.
Admittedly it’s poorly styled, but I’ll appreciate any direction on how to rectify.
Code below is for the Bar Card section of a grid card used to achieve a particular nesting.
- type: custom:bar-card
max: 500
severity:
- from: 0
to: 50
color: lightgreen
- from: 51
to: 100
color: green
- from: 101
to: 150
color: yellow
- from: 151
to: 200
color: orange
- from: 201
to: 300
color: red
- from: 301
color: darkred
entities:
- entity: sensor.camden_kerbside_united_kingdom_air_quality_index
name: null
icon: mdi:circle
indicator: "off"
card_mod:
style: |
bar-card-card {
margin-left: -70px;
margin-top: -16px;
min-width: 236px;
}
ha-card {
border: none !important;
background: rgba(229, 229, 229, 0.15);
}
bar-card-currentbar {
border-radius: 33px 33px 33px 33px;
height: 80px;
opacity: 0.7;
margin-left: px;
margin-top: px;
transform: rotateY(180deg);
}
bar-card-backgroundbar {
background: transparent; %linear-gradient(to right, lightgreen 10%, green 20%, yellow 30%, orange 40%, red 60%, darkred)%
min-height: 80px;
}
bar-card-background {
background: rgba(255, 255, 255, 0.4);
border-radius: 33px 33px 33px 33px;
min-height: 80px;
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1) !important;
}
bar-card-name {
font-size: 23px;
font-color: black;
opacity: 0;
font-weight: bold;
margin-top: 40px;
}
bar-card-value {
font-size: 23px;
font-color: black;
margin-top: 50px;
margin-right: 12px;
font-weight: bold;
opacity: 0;
}
ha-icon {
margin-left: 390px;
margin-top: 35px;
--mdc-icon-size: 49px;
--card-mod-icon-color: transparent;
opacity: 1;
}
Yeah, same problem here. I think it’s a bar height issue as the spacing has changed dramatically. Working on a fix and will post here if I figure something out.
Change all instances of
border-radius:
to
--bar-card-border-radius:
That worked for me.
The height of the bars was also broken for me (extra padding). I did a fix here: GitHub - spacerokk/bar-card: Customizable Animated Bar card for Home Assistant Lovelace
1 Like
saved the day, thanks!
for bar-card-background I had to define both --bar-card-border-radius, and border-radius
Noticed an additional problem with mine, that the Graph Line extends beyond the boundaries of the card
Adding --bar-card-border-radius does help, but does not resolve the issue completely - see the orange vs red lines above.
type: custom:bar-card
entities:
- entity: sensor.pww1018041001257
icon: mdi:water-check
positions:
icon: outside
indicator: "off"
minmax: "off"
name: "off"
value: "off"
min: 0
max: 100
target: 100
height: 8
severity:
- color: rgb(76,175,80)
from: 76
to: 100
- color: rgb(255,152,0)
from: 50
to: 75
- color: rgb(244,67,54)
from: 0
to: 49.9
card_mod:
style: >
{% set entity = {
"state": states('sensor.pww1018041001257') | int(9999999999),
"name": "Water Level",
"unit": " %"
}
%} {% set severity = {
"red": 75,
"orange": 50,
"green": 25
}
%} {% set colors = {
"red": "76,175,80",
"orange": "255,152,0",
"green": "244,67,54"
}
%}
ha-card .card-content {
padding: 12px!important;
cursor: pointer;
}
ha-card {
transition-duration: 0.05s;
}
bar-card-background {
margin-left: 13px !important;
}
bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar,
bar-card-targetbar {
border-radius: 8px;
--bar-card-border-radius: 8px }
bar-card-currentbar, bar-card-backgroundbar, bar-card-contentbar,
bar-card-targetbar, bar-card-animationbar {
{% if entity.state == 9999999999 %}
left: 1.5em !important;
width: calc(100% - 1.5em);
{% else %}
{% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
left: {{state_width}}em !important;
width: calc(100% - {{state_width}}em);
{%- endif %}
}
bar-card-markerbar {
display: none;
}
bar-card-background::before {
content: "{{ entity.name }}";
display: flex;
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
height: 20px;
letter-spacing: 0.1px;
line-height: 20px;
margin-bottom: 6px;
}
bar-card-background::after {
{% if entity.state == 9999999999 %}
content: "N/A"
{%- else %}
content: "{{ entity.state }}{{ entity.unit}}";
{%- endif %}
font-family: Roboto, Noto, sans-serif;
font-size: 12px;
font-weight: 400;
height: 16px;
letter-spacing: 0.4px;
line-height: 16px;
display: inline-block;
position: absolute;
margin-top: -4px;
width: fit-content;
}
bar-card-iconbar {
{% if entity.state == 9999999999 %}
color: rgba(200,200,200, 1);
background-color: rgba(200,200,200, 0.2);
{% elif entity.state < severity.orange %}
color: rgba({{colors.green}}, 1);
background-color: rgba({{colors.green}}, 0.2);
{% elif entity.state < severity.red %}
color: rgba({{colors.orange}}, 1);
background-color: rgba({{colors.orange}}, 0.2);
{%- else -%}
color: rgba({{colors.red}}, 1);
background-color: rgba({{colors.red}}, 0.2);
{%- endif %}
border-radius: 50%;
--bar-card-border-radius: 50%;
}
@arnocl this is based on your kindly shared code, are you seeing the same issue?
1 Like
I had the same issue, I was able to resolve it by introducing a right element and changing the width to auto
change
bar-card-currentbar, bar-card-backgroundbar,
bar-card-contentbar, bar-card-targetbar, bar-card-animationbar {
{% if entity.state == 9999999999 %}
left: 1.5em !important;
right: 0.5em !important;
width: auto !important;
{% else %}
{% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
left: {{state_width}}em !important;
right: 0.5em !important;
width: auto !important;
{%- endif %}
}
2 Likes
Thank you @jamiergrs that fixed it for me
Home assistant 2025.5
After update the gradient stopped working
type: custom:stack-in-card
cards:
- type: custom:bar-card
entities:
- entity: sensor.kachestvo_vozdukha_gostinaia_co2
icon: mdi:molecule-co2
name: []
align: split
columns: 1
height: 4px
width: 50%
animation:
state: "on"
speed: 2
attribute: null
color: white
decimal: 0
direction: right
positions:
icon: inside
indicator: inside
name: inside
minmax: "on"
value: inside
unit_of_measurement: null
max: 4000
min: 0
severity:
- color: "#c5e4ac"
from: "0"
to: "400"
- color: "#faedae"
from: "401"
to: "800"
- color: "#ffd1b1"
from: "801"
to: "1200"
- color: "#f0a994"
from: "1201"
to: "2000"
- color: "#e3d4f6"
from: "2001"
to: "4000"
card_mod:
style: |
ha-card {
border-radius: 2.5px;
border-width: 0px !important;
background: none;
border: none;
height: 38px;
}
ha-icon {
margin-top: -2px;
padding-right: 5px;
--mdc-icon-size: 20px;
color: red;
}
bar-card-indicator {
margin-top: -10px;
padding-right: 0px;
}
bar-card-name {
margin-top: 0px;
padding-left: 0px;
}
bar-card-backgroundbar {
margin-top: 12px;
border-radius: 2.5px;
}
bar-card-currentbar {
margin-top: 12px;
border-radius: 2.5px;
}
bar-card-targetbar {
margin-top: 12px;
border-radius: 2.5px;
}
bar-card-animationbar {
margin-top: 12px;
padding-right: 0px;
}
bar-card-targetmarker {
margin-top: 40px;
border-radius: 2.5px;
}
bar-card-value {
margin-top: 0px;
padding-left: 5px;
}
bar-card-row {
margin-bottom: 0px !important;
margin-top: -10px !important;
}
bar-card-backgroundbar {
background: linear-gradient(to right, green 20%, yellow 40%, orange 60%, red 80%, purple 100%);
border-radius: 25px;
}
bar-card-currentbar {
background: linear-gradient(to right, green 20%, yellow 40%, orange 60%, red 80%, purple 100%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 25px;
mask-image: repeating-linear-gradient( 90deg, transparent 0px, black 5px, transparent 0px, black 5px);
}
bar-card-contentbar {
font-size: 14px; color: white;
}
bar-card-value {
font-size: 14px; color: white;
}
card_mod:
style: |
ha-card {
height: 25px;
border: 0px;
background: transparent;
}
Hi, I strugled with same problem for a day and half.
Resolved it by prefixing bar-card-currentbar and bar-card-backgroundbar
with bar-card-background. Like this:
bar-card-background bar-card-currentbar {
2 Likes
yes it works
very strange but it also works like this
ha-card {
card_mod:
style: |
ha-card {
ha-icon {
margin-top: -2px;
padding-right: 5px;
--mdc-icon-size: 20px;
color: red;
}
Hi,
Is it possible to use the local decimal separator when displaying values? The bar card currently uses a period, which isn’t commonly used in my region. Home assistant shows the local separator when displaying the data.
There’s already a feature request on GitHub, but it’s almost two years old: [Feature Request] Change decimal separator to comma · Issue #170 · custom-cards/bar-card · GitHub
Does anyone have a solution for this?
Hello,
I have a problem with the margin, which I can’t reduce. I use the bar card within a custom grid layout, but unfortunately, with this thick border, the view is not really useful. I have tried the suggestions mentioned so far to eliminate the border, but without success.
Has anyone had the same problem and found a solution?
I would be very grateful :-).
Thanks J
e.g.:
style:
$: |
ha-card {
background: none;
box-shadow: none;
}
@BambamNZ I have the same problem. Thanks to @jamiergrs to supply the quick fix. I tried to improve the code a little to also correct the rounding of the bar and the color of the icon.
Since a while there is also a design change in the original Tile card to hide the icon background when there is no action assigned to the card. For this I added an action boolean to the CSS variables.
The big pain in this update is that every single card (I have nearly 20 of them) has to be adjusted. I’d love to have an option to select “mushroom layout”, just like the developer of the timer-bar-card did. I’d like to fork the Bar Card to enable this feature, but don’t find the time to start 
The improved code can be found below. To be clear as to how to use this card in your dashboards:
- the entity has to be defined in 2 places, in the card itself and in the css variables. The default
int(9999999999)has to remain to define aundefinedstate for the layout - the same with the severity colors and cutoffs, these have to be defined twice
- min, max and target have to be set in the original card
- the name of the card and unit of the entity have to be defined in the css variables, the ones in the original card are ignored
- set action to
trueif clicking on the card triggers an action, else leave it asfalse. This sets the background of the icon to visible or hidden, as per the new design guidelines.
type: custom:bar-card
entities:
- entity: sensor.air_quality_bedroom_voc_index
icon: mdi:air-filter
positions:
icon: outside
indicator: "off"
minmax: "off"
name: "off"
value: "off"
height: 8
min: 0
max: 500
target: 200
severity:
- color: rgb(76,175,80)
from: 0
to: 199
- color: rgb(255,152,0)
from: 200
to: 349
- color: rgb(244,67,54)
from: 350
to: 500
card_mod:
style: >
{% set entity = {
"state": states('sensor.air_quality_bedroom_voc_index') | int(9999999999),
"name": "Air Quality Index",
"unit": ""
}
%} {% set severity = {
"green": 0,
"orange": 200,
"red": 350
}
%} {% set colors = {
"green": "76,175,80",
"orange": "255,152,0",
"red": "244,67,54"
}
%} {% set action = false %}
ha-card .card-content {
padding: 10px!important;
cursor: pointer;
}
ha-card {
transition-duration: 0.05s;
}
ha-card:hover {
{% if entity.state == 9999999999 %}
background-color: rgba(200,200,200, 0.02);
{% elif entity.state < severity.orange %}
background-color: rgba({{colors.green}}, 0.02);
{% elif entity.state < severity.red %}
background-color: rgba({{colors.orange}}, 0.02);
{%- else -%}
background-color: rgba({{colors.red}}, 0.02);
{%- endif %}
}
bar-card-background {
margin-left: 13px !important;
}
bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar,
bar-card-targetbar {
border-radius: 8px !important;
}
bar-card-currentbar, bar-card-backgroundbar, bar-card-contentbar,
bar-card-targetbar, bar-card-animationbar {
{% if entity.state == 9999999999 %}
left: 1.5em !important;
right: 0.5em !important;
width: auto !important;
{% else %}
{% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
left: {{state_width}}em !important;
right: 0.5em !important;
width: auto !important;
{%- endif %}
}
bar-card-markerbar {
display: none;
}
bar-card-background::before {
content: "{{ entity.name }}";
display: flex;
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
height: 20px;
letter-spacing: 0.1px;
line-height: 20px;
margin-bottom: 6px;
}
bar-card-background::after {
{% if entity.state == 9999999999 %}
content: "N/A"
{%- else %}
content: "{{ entity.state }}{{ entity.unit}}";
{%- endif %}
font-family: Roboto, Noto, sans-serif;
font-size: 12px;
font-weight: 400;
height: 16px;
letter-spacing: 0.4px;
line-height: 16px;
display: inline-block;
position: absolute;
margin-top: -4px;
width: fit-content;
}
bar-card-iconbar {
{% if action %} {% set alpha = 0.2 %}
{% else %} {% set alpha = 0 %} {% endif %}
{% if entity.state == 9999999999 %}
color: rgba(200,200,200, 1) !important;
background-color: rgba(200,200,200, {{alpha}});
{% elif entity.state < severity.orange %}
color: rgba({{colors.green}}, 1) !important;
background-color: rgba({{colors.green}}, {{alpha}});
{% elif entity.state < severity.red %}
color: rgba({{colors.orange}}, 1) !important;
background-color: rgba({{colors.orange}}, {{alpha}});
{% else %}
color: rgba({{colors.red}}, 1) !important;
background-color: rgba({{colors.red}}, {{alpha}});
{% endif %}
border-radius: 50%;
max-height: 36px;
max-width: 36px;
}
1 Like
Hello,
currently I try to solve an issue with bar-card in conjunction with card-mod.
Maybe someone can tell me why it is not working.
So I am trying to change the layout of the MIN and MAX marker FONT on my card, so the MAX-value is the same size as MIN-value.
Usually I would think that I can do so within “bar-card-max” and “bar-card-min”. However when I make changes inside these tags - for example:
bar-card-max {
font-weight: bold;
font-size: 25px;
}
Only the font-weight gets respected. Font size does not change.
For min-marker I can adjust the font-size if I do use it in the following section
.min-direction-right {
margin-left: 15%;
margin-right: 85%;
font-size: 20px;
font-weight: bold
}
However there is no such section for the MAX-marker.
So why is it not possible to use the bar-card-min / bar-card-max for font size?
Or what would be the correct tag ? (size, font-size does not work)
Here is the complete YAML of the card.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:config-template-card
variables:
- states['sensor.percent_export_vs_selfuse'].state
- states['sensor.percent_selfuse_vs_export'].state
- states['sensor.percent_calculated_bar'].state
entities:
- ${vars[0].entity_id}
- ${vars[1].entity_id}
- ${vars[2].entity_id}
card:
type: custom:bar-card
decimal: 2
entity_row: 3
positions:
icon: "off"
name: "off"
entities:
- entity: sensor.percent_selfuse_vs_export
unit_of_measurement: "%"
max: ${vars[0] }
min: ${vars[1] }
target: ${vars[2] }
positions:
minmax: inside
value: "off"
color: chartreuse
card_mod:
style: |
ha-card {
border-top: 0px;
border-bottom: 0px;
border-width: 0px;
border-radius: 0 px;
border-color: transparent;
}
.min-direction-right {
margin-left: 15%;
margin-right: 85%;
font-size: 20px;
font-weight: bold
}
bar-card-divider {
display: none;
}
bar-card-markerbar {
display: none;
}
bar-card-max {
font-weight: bold;
font-size: 25px;
}
bar-card-min {
font-weight: bold;
font-size: 25px;
}
``
I have tried to implement your solution to get this kind
but I got that instead this which looks like what Ihave had before
I used this code (I have changed the background colour to white and the font size / weight)
type: custom:stack-in-card
cards:
- type: custom:bar-card
columns: 0
direction: up
stack: horizontal
height: 300px
width: 75%
decimal: 0
entity_row: false
positions:
icon: "off"
name: outside
minmax: "off"
indicator: outside
min: 0
max: 1100
animation:
state: "off"
speed: 5
entities:
- entity: sensor.u1_1_leistung_pro_kwp
name: "Ü1.1: O3"
min: 0
max: 1100
- entity: sensor.u1_2_leistung_pro_kwp
name: "Ü1.2: W1.3"
min: 0
max: 1100
- entity: sensor.u2_1_leistung_pro_kwp
name: "Ü2.1: W1.2"
min: 0
max: 1100
- entity: sensor.u2_2_leistung_pro_kwp
name: "Ü2.2: W1.4"
min: 0
max: 1100
- entity: sensor.u3_1_leistung_pro_kwp
name: "Ü3.1: O1"
min: 0
max: 1100
- entity: sensor.u3_2_leistung_pro_kwp
name: "Ü3.2: O2"
min: 0
max: 1100
- entity: sensor.u4_leistung_pro_kwp
name: "Ü4: GAUBE"
min: 0
max: 1100
- entity: sensor.u5_leistung_pro_kwp
name: "Ü5: O2 + O3"
min: 0
max: 1100
- entity: sensor.blank
name: VOLLEINSPEISER
entity_row: false
color: transparent
min: 0
max: 0
show_state: false
show_icon: false
show_value: false
- entity: sensor.v1_1_leistung_pro_kwp
name: "V1.1: W1.1"
min: 0
max: 1100
- entity: sensor.v1_2_leistung_pro_kwp
name: "V1.2: W2.5"
min: 0
max: 1100
- entity: sensor.v2_1_leistung_pro_kwp
name: "V2.1: W3.6"
min: 0
max: 1100
- entity: sensor.v1_2_leistung_pro_kwp
name: "V2.2: W3.7"
min: 0
max: 1100
title: LEISTUNG DER STRINGS in WATT je kWp
card_mod:
style: |
ha-card {
background: white !important;
}
bar-card-backgroundbar {
background: var(--battery-gradient-vertical);
mask-image: var(--battery-mask-vertical);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.35;
}
bar-card-currentbar {
background: var(--battery-gradient-vertical);
mask-image: var(--battery-mask-vertical);
clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
border-radius: 0px;
}
bar-card-value {
margin: 20px;
font-size: 1.35rem;
font-weight: 500;
}
ha-icon {
color: var(--primary-text-color);
}
I also have added this to my theme file in the config/theme folder and restarted HomeAssistant.
alert-color: 178, 34, 34
green-color: 34, 139, 34
orange-color: 207, 91, 0
yellow-color: 230, 187, 0
battery-gradient-vertical: linear-gradient(360deg, rgba(var(--alert-color),1) 0%, rgba(var(--alert-color),1) 35%, rgba(var(--orange-color),1) 50%, rgba(var(--yellow-color),1) 65%, rgba(var(--green-color),1) 100%)
battery-gradient-horizontal: linear-gradient(90deg, rgba(var(--alert-color),1) 0%, rgba(var(--alert-color),1) 35%, rgba(var(--orange-color),1) 50%, rgba(var(--yellow-color),1) 65%, rgba(var(--green-color),1) 100%)
battery-mask-horizontal: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%)
battery-mask-vertical: repeating-linear-gradient( 360deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%)
Any suggestions how to fix it and how to change the fontsize and weight of the sensors name like here under the first bar “Ü1.1 O3”
Thanks a lot
SUNDAY MORNING UPDATE
I did it again and copied your code into the card on my laptop and still no change. I have copied just 4 entities into it and the same result. no equualizer style colours nor “LED” - just an ordinary chart which I have had already before
Yeah… that doesn’t seem right. 
1 Like
Hi, not sure if you still trying this, see below that is currently working for me
type: custom:bar-card
columns: 1
decimal: 0
positions:
icon: outside
name: 'off'
minmax: 'off'
indicator: 'off'
direction: right
height: 60px
entities:
- entity: sensor.huidige_battery_soc
- entity: sensor.huidige_battery_soc
card_mod:
style: |
ha-card {
background: black !important;
} bar-card-background bar-card-backgroundbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
border-radius: 0px;
filter: brightness(0.65);
opacity: 0.35;
} bar-card-background bar-card-currentbar {
background: linear-gradient(90deg, #B22222 0%, #B22222 5%, #CF5B00 30%, #E6BB00 50%, #228B22 100%);
mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 0px;
} bar-card-value {
margin: 20px;
font-size: 1.25rem;
font-weight: 800;
}
1 Like
Same here. I ignored it to keep it working.
1 Like