Styles That React to Entity State.
Any style property on any block can be driven by live Home Assistant data. Bind background colors to temperature, opacity to a switch state, or generate a CSS gradient from a sensor value — with five powerful binding modes.
- 5
- Binding modes
- Any
- CSS property bindable
- Live
- Real-time updates
- AND/OR
- Logical operators
One Click to Connect a Style to Your Home
Next to every style property in the Styles panel, a binding button opens the binding editor. Choose an entity, pick a mode, configure the mapping — and the style updates live as your entity state changes.
-
1
Click the binding button
Every style property has a 🔗 binding button. Click it to open the dedicated binding editor for that property.
-
2
Choose an entity source
Select which entity to read from, and whether to use its state or a specific attribute as the input value.
-
3
Pick a binding mode
Choose one of five modes — Direct, Map, Threshold, Condition, or Template — depending on how you want to transform the value.
-
4
See it live on the canvas
The canvas updates immediately as you configure the binding. What you see in the editor is exactly what appears on your dashboard.
A Mode for Every Use Case
From a simple direct value pass-through to complex multi-entity conditions — there is a binding mode for every kind of dynamic style you can imagine.
Direct
Map a numeric range to a style range
Passes the entity value directly to the style property, with optional input and output range mapping. Ideal for numeric values like brightness, volume, or temperature.
Example: Brightness → Opacity
Example: Switch State → Background Color
on
#4CAF50
green
off
#9E9E9E
gray
unavailable
#F44336
red
Map
Map specific states to specific values
Define a lookup table: each entity state value maps to a specific style output. Perfect for discrete states like on/off, HVAC modes, or alert levels.
Threshold
Color-code numeric ranges
Define ranges with a min and max value, each producing a different output. Ideal for numeric sensors like temperature, humidity, CO₂, or battery level.
Example: Temperature → Border Color
Example: Multi-entity alert border
2px solid #F44336
1px solid transparent
==
!=
>
<
>=
<=
contains
in
Condition
Logical rules with AND / OR operators
Evaluate conditions using comparison operators and combine them with AND/OR logic. Each condition case can read from multiple entities and attributes. Conditions are evaluated in order — first match wins.
Template
Full control with template strings
Write a template string with {{ }} placeholders that reference entity values. The result is used directly as the CSS property value — enabling any output imaginable, including dynamic gradients.
Example: Dynamic hue gradient
linear-gradient(to right, hsl({{ state }}, 80%, 50%), transparent)
Where {{ state }} is the value of sensor.color_temperature — a number between 0 and 360.
Read From Any Entity or Attribute
Each binding has an independent entity source — it doesn't have to match the block's configured entity. Read state, or drill into any attribute.
Entity State
Use the entity's main state value — the same value shown in the Entity State block.
Specific Attribute
Read any attribute of the entity — brightness, color_temp, fan_speed, battery_level, and more.
Entity Slot
Use an entity slot as the source — the binding updates when the slot assignment changes.
Default Value
Fallback value used when the entity is unavailable or the binding cannot be resolved.
Make Your Cards Come Alive.
Install CardBuilder on your Home Assistant instance and start binding styles to your entity data — free.