Liquid Glass Tile Card - an iOS 26 "Liquid Glass" Tile Card for your Dashboard

[Sebbo]

Hey everyone,

I’ve been chasing the iOS 26 “Liquid Glass” look for my own Sections dashboard for a while, and finally turned it into a proper custom card I’m happy to share: Liquid Glass Tile Card.

It’s a frosted-glass tile/chip card built for the modern Sections layout. One card type covers lights, switches, sensors, and read-only gauges - what it looks like and does changes entirely through config, not through separate card types.

What it does

• Single tile or chip list - one entity for a big tile, or an entities list for a compact stacked/grid row.
• Draggable slider for dimmable lights - drag anywhere on the tile to set brightness, with a glowing “lens” knob and light haptic ticks as you cross each 10% step. Anything non-dimmable (switches, plugs, non-dimmable lights) snaps hard between 0% and 100% instead of settling in between.
• Read-only progress gauges - the same glowing knob, but purely visual and positioned by a small JS template that returns 0-100. I’ve used this for a dishwasher’s progress %, a “days until trash pickup” gauge, and a countdown timer.
• State-reactive tinting - a plain color, or a template evaluated against the entity’s live state. Falls back to a light’s own RGB color automatically.
• Color picker dot - color-capable lights get a small fading dot next to the slider (plus a long-press on the icon as a fallback) that opens the native color picker, without it fighting the drag gesture.
• A generic version of that same dot - any entity can define an icon + action for it, e.g. a small “✕” to cancel a running timer.
• No jank on first paint: the knob places itself instantly the first time a tile becomes visible, so lights that are already on don’t visibly slide in from 0%.

Installation

HACS (custom repository):

1. HACS → “⋮” menu → Custom repositories
2. Add the repo below, category Dashboard
3. Install, then add the resource (HACS usually does this automatically):
   • Settings → Dashboards → Resources → /hacsfiles/liquid-glass-tile-card/liquid-glass-tile-card.js as a JavaScript Module

Manual: drop liquid-glass-tile-card.js into /config/www/, then add /local/liquid-glass-tile-card.js as a resource the same way.

Repo: GitHub - donsebby/liquid-glass-tile-card · GitHub

Quick examples

Dimmable light:

type: custom:liquid-glass-tile-card
entity: light.living_room
slider: true

Switch, behaving like an on/off light:

type: custom:liquid-glass-tile-card
entity: switch.living_room_lamp
slider: true
tint: "[[[ return entity.state === 'on' ? '#FFC168' : null; ]]]"

Read-only progress gauge:

type: custom:liquid-glass-tile-card
entity: sensor.dishwasher_progress
name: Dishwasher
icon: mdi:dishwasher
tint: '#66BB6A'
tap_action:
  action: none
progress: "[[[ return Math.max(0, Math.min(100, parseFloat(entity.state) || 0)); ]]]"
state_text: "[[[ return entity.state + ' %'; ]]]"

The README has the full config reference plus more examples (timers with a cancel dot, chip lists, etc.).

A companion card

If you like grouping related entities behind a collapsible header that opens itself automatically when something inside is active (e.g. a “Vacuum” section that pops open while it’s cleaning), I also split that logic out into a small separate card: Auto Expander Card. Not required for the tile card, just pairs nicely with it.

Feedback welcome

This is fresh out of my own dashboard, so I’m sure there are edge cases and entity types I haven’t tested. Issues, PRs, and screenshots of what you build with it are all very welcome on GitHub. Hope it’s useful to someone else’s dashboard too!