Graph Styling

This guide explains how to apply custom CSS to graph elements.

Basic Workflow

Graph elements support class assignment, just like keys and stat items.

Select a graph element.
Enter a class name in the Class field in the properties panel.
Target that class in custom CSS.


.kps-graph {
  backdrop-filter: blur(6px);
}

Inline Style Priority vs CSS Priority

When Inline Styles Priority is enabled, property panel values take precedence. For graphs, Inline Styles Priority is disabled by default, so CSS-variable-based control works immediately.

Recommended: use class selectors to style specific graphs instead of broad global selectors.

Graph CSS Variables

Available graph variables:

Variable	Description	Type	Example
`--graph-bg`	Graph background	`<color>`	`rgba(17, 17, 20, 0.85)`
`--graph-border`	Border and saved border-ring reset	`<border>`	`1px solid #7dd3fc`, `none`
`--graph-border-image`	Replacement image for a saved ring	`<image>`	`linear-gradient(90deg, #f0f, #0ff)`
`--graph-padding`	Graph inner padding	`<length>`	`0px`, `3px`
`--graph-radius`	Graph corner radius	`<length>`	`10px`
`--graph-color`	Line/bar drawing color	`<color>`	`#86efac`

Example


.kps-graph {
  --graph-bg: rgba(7, 10, 18, 0.72);
  --graph-border: 1px solid rgba(125, 211, 252, 0.55);
  --graph-radius: 12px;
  --graph-color: #7dd3fc;
}

Style Examples

Borderless Glass Panel


.kps-graph {
  --graph-bg: rgba(10, 14, 24, 0.42);
  --graph-border: none;
  --graph-radius: 14px;
  --graph-color: #93c5fd;
  backdrop-filter: blur(8px);
}

Retro Terminal Style


.retro-graph {
  --graph-bg: rgba(6, 18, 6, 0.78);
  --graph-border: 1px solid #22c55e;
  --graph-radius: 6px;
  --graph-color: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.35) inset;
}

Notes

Graph position offsets use the same variables as keys: --key-offset-x, --key-offset-y.
--graph-border: none; removes the solid border, a gradient border ring saved in the properties panel, and its image inset together.