Do you use card-mod to style Home Assistant cards?

A few CSS tweaks are all it takes to customise a standard Lovelace card. You can recolour states, adjust spacing, round corners, and more without creating a custom card. Use card-mod.

It lets you drop plain CSS into almost any built-in card via a card_mod block, so you get the look you want without reinventing the card. Install it through HACS, then keep shared styling in a theme rather than repeating it on every card.

type: entities
entities:
  - light.office
card_mod:
  style: |
    ha-card {
      border-radius: 16px;
      box-shadow: none;
    }

Best practices

Styling is cheap to add and easy to overdo. A few habits keep dashboards fast and stable:

• Decouple data fetching - Dashboards lag when cards directly query heavy, network-dependent or chatty entities (like media players). Cache their state asynchronously using background Trigger-Based Template Sensors
• Isolate Jinja from CSS blocks - Putting Jinja inside a CSS declaration (e.g. ha-card { {% if ... %} }) forces the browser to destroy and rebuild its CSS parser tree on every update. Process the logic up front into variables instead
• Maintain layout stability - Always give structural styles an explicit else fallback (e.g. border: 2px solid transparent). This avoids a sudden 2px layout shift when the condition toggles
• Animate wisely - Animate border-color, not the border shorthand, so the work runs on the GPU instead of forcing a CPU layout recalculation
• Avoid heavy DOM destruction - Dashboard visibility conditions on complex cards (like the SVGs in the thermostat card) cause severe UI stutter as the DOM is torn down and rebuilt. Hide with CSS via card-mod (display: none) instead to keep the layout snappy