My take on a Home Assistant bar card

Card-modded custom bar card

type: custom:config-template-card
variables:
  entity: "'sensor.inside_temperature_average'"
  name: "'Average'"
  bar_color: "'var(--orange-color)'"
  target: "'sensor.knmi_temperature'"
  target_color: "'var(--light-green-color)'"
  _to_gradient: |
    (color) => {
      return 'rgb(from ' + color + ' r g b / 30%), ' + color;
    }
entities:
  - ${entity}
  - ${target}
card:
  type: custom:bar-card
  entities:
    - entity: ${entity}
      name: ${name}
      color: ${ _to_gradient(bar_color) }
  height: 4em
  min: 0
  max: 30
  entity_row: true
  target: "${ target ? states[target].state : false }"
  positions:
    icon: "off"
    indicator: "off"
    minmax: "off"
    title: inside
    value: inside
  card_mod:
    style: |-
      ${`
        ha-card {
          overflow: clip;
        }
        bar-card-contentbar {
          height: 100%;
          padding: 0 1em;
          filter: drop-shadow(0 0 .1em var(--primary-background-color));
        }
        bar-card-contentbar .value-direction-right:before {
          content: "— ";
        }
        bar-card-contentbar .value-direction-right {
          color: var(--primary-text-color);
          margin-left: 0;
          opacity: 80%;
        }
        bar-card-background bar-card-backgroundbar {
          background: ${bar_color};
          filter: none;
        }
        bar-card-background bar-card-targetbar {
          display: none;
        }
        bar-card-background bar-card-markerbar {
          background: ${target_color};
          filter: drop-shadow(0 0 3px hsl(from ${target_color} h s calc(l/2)));
          width: 3px !important;
          margin-left: -1.5px;
          opacity: 100%;
        }
        bar-card-card:hover bar-card-markerbar:after {
          content: "${ target ? states[target].state + ' ' + (states[target]?.attributes?.unit_of_measurement ? states[target]?.attributes?.unit_of_measurement : '') : '' }";
          white-space: nowrap;
          font-size: .8em;
          padding: 0 .8em;
          border-radius: 1em;
          border: 2px solid ${target_color};
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          background: var(--primary-background-color);
          color: var(--primary-text-color);
        }
      `}