Style your controller overlay with custom CSS

The editor covers colors, size, layout and labels. When you want something it does not offer, like an outline that lights up on press, labels that only appear while a button is held, or your own font, custom CSS on Pro lets you restyle any part of the overlay. This page lists everything you can target and the few things to leave alone.

Where the CSS goes

Open your overlay in the editor, go to the CSS tab and choose Write CSS. The CSS applies to the overlay in OBS, not to the preview in the editor, and it reaches OBS as soon as you save, without refreshing the source. Keep the editor preview for layout and check styling in OBS.

Leave the Custom CSS box in OBS's Browser Source properties empty. It targets the same page, but CSS saved in gamepad.lol travels with the overlay into every scene and every OBS profile that uses its link.

The overlay is SVG

Every control is an SVG shape inside a single svg element. That decides which properties work: shapes are colored with fill and stroke, not background and border, and text is colored with fill, not color. Sizes such as font-size and stroke-width are measured in the skin's own 640 × 360 drawing and scale with the overlay, not in screen pixels.

Selectors

Every control has its own id, and every control of a kind shares a class. In the CSS editor, type #, . or [ to get the exact list for your skin.

• Face buttons are named after the skin's buttons: #face-a, #face-b, #face-x, #face-y on Xbox and Switch Pro; #face-cross, #face-circle, #face-square, #face-triangle on PlayStation; #face-down, #face-right, #face-left, #face-up on the neutral skin. Class .gpl-button.
• D-pad: #dpad-up, #dpad-down, #dpad-left, #dpad-right. Class .gpl-button.
• Bumpers and menu buttons: #bumper-l, #bumper-r, #select, #start. Class .gpl-button.
• Sticks: #stick-l and #stick-r are the moving caps, #stick-l-ring and #stick-r-ring the outlines around them. Classes .gpl-stick and .gpl-stick-ring.
• Triggers: #trigger-l and #trigger-r are the fills, #trigger-l-track and #trigger-r-track the backgrounds. Classes .gpl-trigger and .gpl-trigger-track.
• Labels and symbols: a labeled button's text is its id plus -label, such as #face-a-label or #bumper-l-label; the PlayStation symbols are #face-cross-glyph and so on. Classes .gpl-label and .gpl-glyph. They only exist while Button labels is on.

Face button ids follow the letters, not the position. Xbox has A at the bottom and Switch Pro has it on the right, so a rule for #face-a moves when you switch between those skins. Use the classes when you want a rule to survive a skin change.

The pressed state

While a control is held, its shape carries a data-pressed attribute: buttons while pressed, triggers while pulled at all, sticks while clicked in.

.gpl-button[data-pressed] {
  fill: #ffd60a;
}

A label or symbol sits right after its button, so you can style it from the button's state with +. Labels are text and take fill; the PlayStation symbols are outlines and take stroke:

.gpl-button[data-pressed] + .gpl-label {
  fill: #111111;
}

.gpl-button[data-pressed] + .gpl-glyph {
  stroke: #111111;
}

What to leave alone

The overlay animates by writing SVG attributes on every frame: transform on the stick caps, height and y on the trigger fills. CSS wins over attributes, so setting those properties on those elements freezes them in place. Style everything else freely: fill, stroke, stroke-width, opacity, fonts.

Colors work the same way. The editor's Idle and Pressed colors are attributes too, so once your CSS sets fill on a button, write a [data-pressed] rule for it as well, or it will look the same pressed and released.

Limits

• No remote files. @import and url() pointing at a web address are rejected. Images and fonts have to be inlined as base64 data: URIs.
• 20,000 characters in total, inlined images included. That is plenty for styling and small icons, not for full artwork.
• No backslashes. CSS escapes are rejected, since they can spell out anything the other rules block.
• Pro only. If your subscription ends, your CSS stays saved but stops being applied, and comes back if you subscribe again.

If a save is rejected, the editor shows a warning and keeps the dialog open, so nothing you typed is lost and the CSS already live in OBS stays as it was.

Examples

Your brand colors

.gpl-button,
.gpl-stick {
  fill: #1f1f24;
}

.gpl-button[data-pressed],
.gpl-stick[data-pressed] {
  fill: #9146ff;
}

.gpl-trigger {
  fill: #9146ff;
}

An outline that lights up on press

.gpl-button {
  stroke: #9146ff;
  stroke-width: 0;
}

.gpl-button[data-pressed] {
  stroke-width: 4;
}

Quiet until pressed

.gpl-button,
.gpl-stick,
.gpl-stick-ring,
.gpl-trigger-track {
  opacity: 0.35;
}

.gpl-button[data-pressed],
.gpl-stick[data-pressed] {
  opacity: 1;
}

Labels only while held

.gpl-label,
.gpl-glyph {
  opacity: 0;
}

.gpl-button[data-pressed] + .gpl-label,
.gpl-button[data-pressed] + .gpl-glyph {
  opacity: 1;
}

A font installed on your PC

OBS's browser can use fonts installed on the computer that runs it, so a local font needs no upload:

.gpl-label {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
}

Anyone else who opens the overlay without that font gets the fallback.

To move or hide elements, use the Layout tab instead: it saves positions per element and does not fight the animation.