Styling

Styling

The style option injects CSS, with your variables substituted into it. That means a template can expose its colours and dimensions as variables, and each instance can look different without card-mod or any other helper.

decluttering_templates:
  fancy_room:
    card:
      type: tile
      entity: '[[light]]'
      name: '[[room]]'
      features:
        - type: toggle
    style: |
      :host {
        --ha-card-border-color: [[accent]];
        --ha-card-border-width: 2px;
        --ha-card-border-radius: 18px;
      }
    default:
      - accent: '#2E5EA8'

- type: custom:decluttering-card-plus
  template: fancy_room
  variables:
    - light: light.living_room
    - room: Living Room

- type: custom:decluttering-card-plus
  template: fancy_room
  variables:
    - light: light.kitchen
    - room: Kitchen
    - accent: '#c2410c'

The first card takes the default blue, the second overrides accent to orange. The third in the screenshot uses instance-level style, below.

---

Read this first: what CSS can reach

This is the part that trips everyone up, and it is worth two minutes.

Your CSS is injected into the wrapper's shadow root. Home Assistant's cards each live in a shadow root of their own, nested inside that. CSS does not cross a shadow boundary, so an ordinary descendant selector cannot reach into the card.

decluttering-card-plus            <- your CSS is injected here
└─ hui-card                       <- reachable
   └─ hui-tile-card               <- reachable
      └─ #shadow-root
         └─ ha-card               <- NOT reachable by a selector

Selector	Reaches the card?
ha-card { border: 2px solid red; }	❌ No. ha-card is inside the card's own shadow root.
:host { --ha-card-border-color: red; }	✅ Yes. Custom properties inherit through shadow boundaries.
:host(.decluttering-container) { opacity: 0.5; }	✅ Yes — styles the wrapper itself.
hui-card { outline: 2px dashed red; }	✅ Yes — hui-card is in the wrapper's shadow root.

So: style with CSS custom properties. That is the supported, forward-compatible way to change a Home Assistant card's appearance, and it is what the examples here use.

If you have seen ha-card { … } in older documentation for this card, that is why it appeared to do nothing.

Useful custom properties

A starting set — Home Assistant has many more, and cards define their own.

Property	Effect
--ha-card-background	Card background
--ha-card-border-color	Border colour
--ha-card-border-width	Border width (0 removes it)
--ha-card-border-radius	Corner rounding
--ha-card-box-shadow	Drop shadow
--primary-text-color	Main text
--secondary-text-color	Secondary text
--state-icon-color	Icon colour
--mdc-icon-size	Icon size

To find others, inspect the card in your browser's dev tools and look at the custom properties on ha-card.

---

Where style can go

On the template

Applies to every instance:

decluttering_templates:
  soft_card:
    card:
      type: entity
      entity: '[[entity]]'
    style: |
      :host {
        --ha-card-border-width: 0;
        --ha-card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }

On the instance

Applies to that one card. Handy for a one-off tweak without touching the template:

- type: custom:decluttering-card-plus
  template: room_light
  variables:
    - light: light.bedroom
    - room: Bedroom
  style: |
    :host(.decluttering-container) {
      --ha-card-border-color: var(--error-color);
      --ha-card-border-width: 2px;
    }

Both at once is allowed. The template's CSS is injected first, the instance's after it, so the instance wins on equal specificity.

Variables are substituted into both.

Host classes

The wrapper element carries a class you can target:

Class	On
decluttering-container	Card, row and element templates
decluttering-badge	Badge templates

:host(.decluttering-container) {
  display: flex;
  justify-content: center;
}

For badges the wrapper deliberately takes up no space in the badge row, so there is nothing to paint on the host — style the badge through custom properties instead.

Variables in CSS

Anything in the CSS string is substituted, so whole rules can be parameterised:

decluttering_templates:
  themed:
    card:
      type: tile
      entity: '[[entity]]'
    style: |
      :host {
        --ha-card-background: [[bg]];
        --ha-card-border-radius: [[radius]];
      }
    default:
      - bg: var(--card-background-color)
      - radius: 12px

variables:
  - bg: '#1e293b'
  - radius: 24px

Note that a variable's value can itself be a CSS function such as var(--card-background-color).

Alternatives

style covers the common cases without another dependency. For anything deeper — restyling a card's internals, :hover states inside a card — card-mod is still the right tool, and works normally on templated cards.

---

→ Variables · Configuration Reference