Hello Miura
sorry, i cannot programming yaml , I see no field where i can write the “title”
Wenn i try in ABC titles … it doesnt show this word
Ah … I try, and delete all in there, and then it shows what i write 
Thanks
LEFT: Gauge Card Pro (Similar pointer the the old HA Gauge Card)
RIGHT: HA Gauge Card (Much prefer the pointer in the latest 2026.4.2, with the black outline) In my opinion more modern and hopefully more accessible to those with vision impairment.
@Miura Would be nice to give us some pointer options, old style vs new style.
Already possible. You can set custom shapes for needles etc:
HA now uses:
M -34,-3 L -48,-1 A 1,1,0,0,0,-48,1 L -34,3 A 2,2,0,0,0,-34,-3 Z
You can set several custom CSS variables using uix or card_mod.
See: GitHub - benjamin-dcs/gauge-card-pro: Build beautiful Gauge cards using 🌈 gradients and 🛠️ templates · GitHub
You’ll be looking at:
--main-needle-stroke-color--main-needle-stroke-width
2 Likes
With the shape you provided I ended up with the following result.
- No black outline
- A bit complex for me to work out the svg shape each needle should be and up and down orientation.
OK result by just changing the main needle
For the black outline you need:
You can set several custom CSS variables using uix or card_mod.
See: GitHub - benjamin-dcs/gauge-card-pro: Build beautiful Gauge cards using 
gradients and 
templates · GitHub
You’ll be looking at:
--main-needle-stroke-color--main-needle-stroke-width
With a tool like SvgPathEditor you can play around with the shapes. I has some option to mirror, rotate, scale etc
1 Like
Thanks for the help.
Managed to rotate by 180 in the SVG editor but that placed the needle off the gauge.
Stroke color and width seemed to have no affect, I place the card-mod at the root of the card.
I am happy with my OK result.
Make sure the path stays at the left side of the grid in that editor (so negative x-axis). Just rotating probably moved it to the ‘other’ side. Just translate it back
Show me your config with the card-mod. It should just work (just checking: you sure you’ve got card-mod (or uix for that matter) installed right?)
I am unfamiliar with uix.
Here is my code and managed to translate (-80) and angle/rotate (180) the primary indicator the way I want.
- type: custom:gauge-card-pro
value_texts:
secondary:
color: silver
entity: sensor.fish_tank_water_temp
min: 27
max: 29.5
segments:
- from: 27
color: '#3196e2'
- from: 27.9
color: '#43a047'
- from: 28.5
color: '#ffa600'
- from: 29
color: '#db4437'
needle: true
gradient: false
titles:
primary:
value: '{{ state_attr(entity, ''friendly_name'') }}'
entity2: sensor.seney_temperature
inner:
min: 27
max: 29.5
segments:
- from: 27
color: '#3196e2'
- from: 27.9
color: '#43a047'
- from: 28.5
color: '#ffa600'
- from: 29
color: '#db4437'
mode: needle
gradient: false
needle_color: silver
round: 'off'
shapes:
main_needle: >-
M-46 3-32 1A1 1 180 00-32-1L-46-3A2 2 180 00-46 3Z
card_mod | uix:
style: |
* {
--main-needle-stroke-width: 4px;
--main-needle-stroke-color: black;
}
Change card_mod | uix: to card_mod:
I decided to go the other way and ditch the pointer, and add some css to make the gauge look more recessed.
2 Likes
Done below using SvgPathEditor
- Primary Needle: scale: (0.8X) (0.8Y), translate (-100), angle/rotate (180), added 1px border
- Inner Needle: added 1px border
- type: custom:gauge-card-pro
value_texts:
secondary:
color: silver
entity: sensor.fish_tank_water_temp
min: 27
max: 29.5
segments:
- from: 27
color: '#3196e2'
- from: 27.9
color: '#43a047'
- from: 28.5
color: '#ffa600'
- from: 29
color: '#db4437'
needle: true
gradient: false
titles:
primary:
value: '{{ state_attr(entity, ''friendly_name'') }}'
entity2: sensor.seney_temperature
inner:
min: 27
max: 29.5
segments:
- from: 27
color: '#3196e2'
- from: 27.9
color: '#43a047'
- from: 28.5
color: '#ffa600'
- from: 29
color: '#db4437'
mode: needle
gradient: false
needle_color: silver
round: 'off'
shapes:
main_needle: >-
M-46.8 2.4-35.6.8A.8.8 90 00-35.6-.8L-46.8-2.4A1.6 1.6 90 00-46.8 2.4Z
card_mod:
style: |
* {
--main-needle-stroke-width: 1px;
--main-needle-stroke-color: black;
--inner-needle-stroke-width: 1px;
--inner-needle-stroke-color: black;
}
Much closer to the new native HA Gauge
LEFT: Gauge Card Pro
RIGHT: HA Gauge Card
2 Likes
Looks good.
Just ‘FYI’: Looking at your segments you could consider the on_main mode for the inner gauge
1 Like
@Miura Thanks as per usual for your prompt help and continual development of this card.
I think I did try on_main before, I prefer the separation.
1 Like
I would recommend on your repository to have a uix: and card-mod: examples, just to clear things up.
1 Like
Hi all,
is it possible to get some help with this neat looking card please?
I am trying to replace a dead card (Tempometer card) and want temperature with a min/max marker. Range would -5 to 40c and colour range from blue to red by gradient.
I tried setting it up myself but failed and then tried the ChatGPT assistant but although it created a pretty image (below) the code did not work when pasted.
The gauge style GPT created wasn’t quite what i wanted but would do to start with. The min/max as small blobs seems good but small pointers would be good too.
My attempt got me this…
Any help much appreciated
@Miura don’t happen to know the shape of the new HA Gauge needle do you? I did much prefer the previous longer style but they decided to make it shorter.
LEFT: Gauge Card Pro
RIGHT: HA Gauge Card (latest version of needle (short and fat style))
LEFT: Gauge Card Pro
RIGHT: HA Gauge Card (previous version of needle (longer style))
This one?:
notice with the right picture above that the new HA needle is short and fat?
1 Like
I‘m using this code right now:
M -34,-3 L -48,-1 A 1,1,0,0,0,-48,1 L -34,3 A 2,2,0,0,0,-34,-3 Z
Have you figured out to make the needle „short and fat“ so it fits with the lately introduced native needle style?
Any suggestion will be appreciated.