Skip to content

Smart Home: Advanced Home Assistant Dashboard Customization with CSS

Once you have deployed Home Assistant (e.g. our Zigbee Integration Guide) and connected your sensors, the next step is making that data visually stunning. Home Assistant's default dashboard is functional, but can feel cluttered and basic.

HACS (Home Assistant Community Store) provides access to custom frontend cards. This guide uses layout tools and card-mod to adjust a Home Assistant dashboard.

This guide walks you through: 1. Installing HACS inside a containerized Home Assistant. 2. Installing essential custom dashboard plugins. 3. Adjusting a sensor card with CSS and YAML.

The Design Aesthetic (Glassmorphism UI)

Glassmorphism relies on a frosted-glass look, featuring translucent backgrounds, subtle borders, shadows, and background blur: - background: rgba(255, 255, 255, 0.1) - backdrop-filter: blur(10px) - border: 1px solid rgba(255, 255, 255, 0.2) - box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3)

Step 1: Install HACS (Home Assistant Container Environment)

If you are running Home Assistant inside a Docker container on your Raspberry Pi, you need to execute HACS's installer script inside the container's shell.

1. Execute the Installer Script

Find the name of your container (usually homeassistant): 

1
docker ps

Run the HACS downloader script inside the container directory: 

1
docker exec -it homeassistant bash -c "wget -O - https://get.hacs.xyz | bash -"

2. Restart and Integrate

Restart Home Assistant to load the custom component: 

1
docker restart homeassistant
  1. Open Home Assistant Web UI (http://<your-pi-ip>:8123).
  2. Go to Settings -> Devices & Services -> Add Integration.
  3. Search for HACS and click to configure.
  4. Follow the prompt to log in with your GitHub account to authorize API access.

Step 2: Install Essential Frontend Plugins

With HACS enabled: 1. Go to HACS -> Frontend in the left navigation sidebar. 2. Click Explore & Download Repositories in the bottom right. 3. Search for and download the following three plugins: - card-mod: Allows injecting custom CSS styles directly into any Lovelace card. - button-card: A highly customizable grid-ready button. - mini-graph-card: Sleek, minimalist graphical sensor charts.

Step 3: Write a Custom CSS Glassmorphism Sensor Card

The following card combines a temperature-history chart with CSS blur and layout adjustments.

graph TD A["Raw Sensor Data"] -->|mini-graph-card| B["Standard Lovelace Graph"] B -->|card-mod CSS Injection| C["Frosty Glass Card with Gradient Chart"] C -->|Lovelace Frontend| D["Wall-Mounted Control Tablet"] style C fill:#f72585,stroke:#b5179e,color:#fff
  1. On your Dashboard, click the three dots in the top-right -> Edit Dashboard.
  2. Click + Add Card -> Scroll to the bottom and select Manual.
  3. Replace the default YAML with the following custom configured dashboard card:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
type: custom:mini-graph-card
entity: sensor.living_room_temp # Replace with your actual sensor entity
name: Living Room Temperature
icon: mdi:thermometer
hours_to_show: 24
points_per_hour: 2
line_width: 3
line_color: '#ff9f43'
show:
  fill: fade
  extrema: true
card_mod:
  style: |
    ha-card {
      background: rgba(255, 255, 255, 0.05) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 16px !important;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
      padding: 16px;
    }
    .header .title {
      color: rgba(255, 255, 255, 0.9) !important;
      font-size: 1.1em;
      font-weight: 500;
      letter-spacing: 0.5px;
    }
    .header .icon {
      color: #ff9f43 !important;
      filter: drop-shadow(0 0 8px rgba(255, 159, 67, 0.4));
    }
    .info .value {
      color: #ffffff !important;
      font-size: 2.2em !important;
      font-weight: 300 !important;
    }
    .info .measurement {
      color: rgba(255, 255, 255, 0.6) !important;
      font-size: 1em !important;
    }
    .graph .fill {
      fill: rgba(255, 159, 67, 0.1) !important;
    }

Step 4: Add a Blurred Background Wallpaper

To make the translucent card pop, we need a vibrant, dark-themed background wallpaper.

  1. Click the three dots -> Edit Dashboard.
  2. Click the three dots again -> Raw Config Editor.
  3. Under the views: list, append background styling to your view parameters:

1
2
3
4
5
6
7
8
9
views:
  - title: Home
    path: home
    background: >-
      center / cover no-repeat fixed
      url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=1600')
    cards:
      - type: custom:mini-graph-card
        # ... (card config here)
4. Save and exit. The cards will now float beautifully over the background with real-time blur blending!

Step 5: Optimization for Wall Tablets (Kiosk Mode)

If you plan to mount an old tablet or screen on the wall to act as a smart home controller, you must hide the default Home Assistant header bar and sidebar.

  1. Install kiosk-mode from HACS -> Frontend.
  2. In the Lovelace URL, appending ?kiosk will hide both the header and sidebar, maximizing screen utilization for your custom Glassmorphism panels: http://<your-pi-ip>:8123/lovelace/home?kiosk

Use card-mod and mini-graph-card to adjust layouts and display sensor history. Check the dashboard on the actual screen sizes you plan to use.

Donate