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.

By installing HACS (Home Assistant Community Store), we can unlock custom layout engines, modern custom frontend cards, and apply custom CSS styles using card-mod.

This guide walks you through: 1. Installing HACS inside a containerized Home Assistant. 2. Installing essential custom dashboard plugins. 3. Writing a responsive, premium Glassmorphism-styled card combining 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

Let's combine these plugins to build a premium Glassmorphism sensor card showing home temperature history with a blur effect and a gradient chart.

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

By mastering custom CSS injections with card-mod and mini-graph-card, you can design clean, premium dashboards that rival commercial smart screen solutions.