Community-driven visual enhancements for Steam store pages, verified by game developers.
  • CSS 52.1%
  • JavaScript 45%
  • HTML 2.9%
Find a file
2026-03-22 03:14:17 -07:00
.github Initial release of SteamFoil 2026-03-22 02:36:23 -07:00
extension Fix logo aspect ratios, add force-reload, juice up all game styles 2026-03-22 03:06:37 -07:00
games Fix logo aspect ratios, add force-reload, juice up all game styles 2026-03-22 03:06:37 -07:00
.gitignore Initial release of SteamFoil 2026-03-22 02:36:23 -07:00
CONTRIBUTING.md Simplify to CSS-first architecture, keep bouncing logo as only built-in effect 2026-03-22 02:51:23 -07:00
demo.gif Add demo GIF to README 2026-03-22 03:11:16 -07:00
index.json Fix logo aspect ratios, add force-reload, juice up all game styles 2026-03-22 03:06:37 -07:00
LICENSE Initial release of SteamFoil 2026-03-22 02:36:23 -07:00
README.md Add live demo links for all 3 games 2026-03-22 03:14:17 -07:00

SteamFoil

Community-driven visual enhancements for Steam store pages, verified by game developers.

SteamFoil is a browser extension that lets game developers customize their Steam store pages with CSS. Developers submit their styles to this repo, verify ownership with a token on their page, and players who install the extension see the enhanced version automatically.

SteamFoil in action

For Players

Install the extension, then visit any Steam store page that has SteamFoil content. Styles appear automatically — no configuration needed.

The extension icon shows a ✦ badge when a page has active SteamFoil enhancements.

Install

  1. Download the latest release from the Releases page
  2. Extract the zip to a folder
  3. Open chrome://extensions (or vivaldi://extensions, edge://extensions)
  4. Enable Developer mode
  5. Click Load unpacked and select the extracted folder

See It Live

Install the extension and visit these Steam pages to see SteamFoil in action:

  • DVD Survivors — CRT scanlines, vignette, bouncing logo, neon gold title glow, chromatic aberration
  • Starboys — Starfield overlay, deep space vignette, bouncing logo, nebula glow, amber gold title pulse
  • Bloodrust — Heavy rust vignette, subtle scanlines, bouncing logo, ember glow, smoldering borders

For Game Developers

Add visual flair to your Steam store page with custom CSS. Players with SteamFoil installed will see your styles — everyone else sees the normal page.

Read the full guide →

Quick Start

  1. Fork this repo
  2. Create games/<your-app-id>/ with a manifest.json and style.css
  3. Add a verification token to your Steam page description
  4. Submit a pull request

What You Get

Write whatever CSS you want. Scanlines, glows, vignettes, custom colors, animated backgrounds — it's your page.

There is one optional built-in effect that requires JavaScript and can't be done with CSS alone:

Effect Description
bouncing-logo A logo image that bounces around the page with physics, impact squash, and hue-shifting

Enable it in your manifest.json if you want it. Everything else is pure CSS in your style.css.

How Verification Works

Your game's manifest.json contains a unique token, and that same token must appear somewhere on your Steam page (e.g., at the bottom of your game description). The extension checks for the token before applying any styles.

No accounts, no OAuth, no API keys. If you control the page, you can verify it.

Repo Structure

steamfoil/
├── index.json              ← Master list of games with SteamFoil content
├── games/
│   └── <app-id>/
│       ├── manifest.json   ← Game config and verification token
│       ├── style.css       ← Custom CSS
│       └── assets/         ← Images referenced in CSS (max 5MB total)
└── extension/              ← Browser extension source

License

MIT