https://github.com/detekoi/static-browser-overlays
Free, customizable browser source overlays for Twitch/OBS streaming
https://github.com/detekoi/static-browser-overlays
browser-source obs obs-studio streamelements streamer-tool streamlabs twitch
Last synced: 6 months ago
JSON representation
Free, customizable browser source overlays for Twitch/OBS streaming
- Host: GitHub
- URL: https://github.com/detekoi/static-browser-overlays
- Owner: detekoi
- License: bsd-2-clause
- Created: 2025-03-01T00:20:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-25T05:48:23.000Z (8 months ago)
- Last Synced: 2025-08-25T08:03:21.148Z (8 months ago)
- Topics: browser-source, obs, obs-studio, streamelements, streamer-tool, streamlabs, twitch
- Language: HTML
- Homepage:
- Size: 11.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Browser Overlays for Streaming
This repository contains a variety of browser overlays for OBS, Streamlabs, and other streaming software. The overlays are designed to be easy to use, customize, and integrate into your stream.
## Features
- **Beautiful Overlays**: HTML/CSS overlays with elegant animations and minimal JavaScript.
- **Animated Elements**: Snowfall, aurora effects, and abstract animations for a dynamic look.
- **Easy to Customize**: Clear documentation on how to modify colors, text, and other elements.
- **Open Source**: Free to use and modify under the BSD 2-clause license.
## Available Overlays
### Cozy 10:9 Aspect Ratio
A stylish overlay for Cozy 10:9 Aspect Ratio streams.
[📄 Documentation](sources/overlays/cozy%2010-9%20aspect%20ratio/overlay-readme.md) |
[⬇️ Download ZIP](releases/cozy-10-9-aspect-ratio.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/overlays/cozy%2010-9%20aspect%20ratio/overlay.html)
### Cozy 16:9 Aspect Ratio
A stylish overlay for Cozy 16:9 Aspect Ratio streams.
[📄 Documentation](sources/overlays/cozy%2016-9%20aspect%20ratio/overlay-readme.md) |
[⬇️ Download ZIP](releases/cozy-16-9-aspect-ratio.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/overlays/cozy%2016-9%20aspect%20ratio/overlay.html)
### Retro Sakura
A stylish overlay for Retro Sakura streams, featuring springtime colors and a nostalgic aesthetic that brings a touch of elegance to your stream.
[📄 Documentation](sources/overlays/retro-sakura/retro-sakura-readme.md) |
[⬇️ Download ZIP](releases/retro-sakura.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/overlays/retro-sakura/retro-sakura.html)
### Minimal 10:9
A clean, minimal overlay for 10:9 aspect ratio gameplay with highly customizable features.
[📄 Documentation](sources/overlays/minimal-10-9/overlay-readme.md) |
[⬇️ Download ZIP](releases/minimal-10-9.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/overlays/minimal-10-9/overlay.html)
### Minimal 16:9
A clean, minimal overlay for 16:9 aspect ratio gameplay with fully customizable styling.
[📄 Documentation](sources/overlays/minimal-16-9/overlay-readme.md) |
[⬇️ Download ZIP](releases/minimal-16-9.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/overlays/minimal-16-9/overlay.html)
### Light 16:9
A clean, light-themed overlay for 16:9 aspect ratio gameplay with customizable off-white borders.
[📄 Documentation](sources/overlays/light-16-9/overlay-readme.md) |
[⬇️ Download ZIP](releases/light-16-9.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/overlays/light-16-9/overlay.html)
### Minimal 4:3
A clean, minimal overlay for 4:3 aspect ratio gameplay with extensive customization options.
[📄 Documentation](sources/overlays/minimal-4-3/overlay-readme.md) |
[⬇️ Download ZIP](releases/minimal-4-3.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/overlays/minimal-4-3/overlay.html)
### Ascii
A stylish overlay for Ascii streams.
[⬇️ Download ZIP](releases/ascii.zip?raw=true)
### Cozy 10 9 Gameboy
A stylish overlay for Cozy 10 9 Gameboy streams.
[⬇️ Download ZIP](releases/cozy-10-9-gameboy.zip?raw=true)
### Cozy 4:3 Aspect Ratio
A stylish overlay for Cozy 4:3 Aspect Ratio streams.
[📄 Documentation](sources/sources/overlays/cozy-4-3-aspect-ratio/overlay-readme.md) | [⬇️ Download ZIP](releases/cozy-4-3-aspect-ratio.zip?raw=true)
### Ascii Parallax
A stylish overlay for Ascii Parallax streams.
[⬇️ Download ZIP](releases/ascii-parallax.zip?raw=true)
### Ascii Psychedelic
A stylish overlay for Ascii Psychedelic streams.
[⬇️ Download ZIP](releases/ascii-psychedelic.zip?raw=true)
## Available Backgrounds
### Liquid Background
A stylish overlay for Liquid Background streams.
[⬇️ Download ZIP](releases/liquid-background.zip?raw=true)
### Sakura Background
A stylish background for Sakura-themed streams, adorned with delicate cherry blossoms and soft pastel colors, creating a serene and enchanting atmosphere.
[📄 Documentation](sources/backgrounds/sakura-background/sakura-background-readme.md) |
[⬇️ Download ZIP](releases/sakura-background.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/backgrounds/sakura-background/sakura-background.html)
### Cube Pattern Background
An animated isometric cube pattern with dynamic lighting effects, perfect as a background for modern gaming streams.
[📄 Documentation](sources/backgrounds/cube-pattern-background/cube-pattern-background-readme.md) |
[⬇️ Download ZIP](releases/cube-pattern-background.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/backgrounds/cube-pattern-background/cube-pattern-background.html)
### Arctic Background
A winter-themed background with animated aurora borealis effects, falling snowflakes, and a snowy landscape.
[📄 Documentation](sources/backgrounds/arctic-background/arctic-background-readme.md) |
[⬇️ Download ZIP](releases/arctic-background.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/backgrounds/arctic-background/arctic-background.html)
### Twinkling Stars Background
An animated background with twinkling stars, perfect as a base layer for space-themed streams.
[📄 Documentation](sources/backgrounds/stars-background/stars-background-readme.md) |
[⬇️ Download ZIP](releases/stars-background.zip?raw=true) |
[🔍 Live Demo](https://detekoi.github.io/static-browser-overlays/sources/backgrounds/stars-background/stars-background.html)
## Getting Started
### Quick Start Options
**Option 1: Download and Use Locally (Recommended)**
- Download the ZIP file for your chosen overlay or background.
- Extract and use locally for full customization capabilities.
- Stable version that won't change unexpectedly.
**Option 2: Use Live Demo Links Directly**
- Copy the Live Demo URL and paste it into OBS as a browser source.
- No download required, but customization isn't possible.
- Requires internet connection while streaming.
- Subject to change if the repository is updated.
Check out the [installation guide](docs/installation.md) for complete instructions on both methods.
## Customization
See the [customization guide](docs/customization.md) for details on how to modify the overlays to match your stream's aesthetic.
**Note**: Customization is only possible with locally downloaded files, not with the Live Demo links.
## Contributing
Contributions are welcome! See the [contribution guide](docs/CONTRIBUTING.md) for guidelines on how to contribute to this project.
## License
This project is licensed under the MIT License - see the [LICENSE](docs/LICENSE.md) file for details.