Stream Overlay Maker
Local design only: fixed 1920×1080 transparent HTML/CSS layout, up to 16 frame placeholders, labels or panels. Click a layer or use the selector, then edit its position, dimensions, title, text, colors, border and opacity. New layers appear above earlier layers. Text is clipped to its box. No dragging, camera/video capture, live alerts, platform connection or deployment. The downloaded standalone HTML has no scripts or external assets. Inputs are not uploaded or saved by the app; downloads save only when requested. PNG is drawn directly from the layers on a transparent 1920×1080 Canvas, not a rasterized HTML screenshot. Text wraps by Unicode code points; tabs become four spaces. Line breaks and font layout can differ from the HTML preview.
Local design only: fixed 1920×1080 transparent HTML/CSS layout, up to 16 frame placeholders, labels or panels. Click a layer or use the selector, then edit its position, dimensions, title, text, colors, border and opacity. New layers appear above earlier layers. Text is clipped to its box. No dragging, camera/video capture, live alerts, platform connection or deployment. The downloaded standalone HTML has no scripts or external assets. Inputs are not uploaded or saved by the app; downloads save only when requested.
Limits: width 40–1920, height 40–1080, font 12–100, border 0–20 pixels, opacity 0–100. Checkerboard and selection outlines appear only in the preview. Preview is scaled; export keeps fixed pixel dimensions.
PNG is drawn directly from the layers on a transparent 1920×1080 Canvas, not a rasterized HTML screenshot. Text wraps by Unicode code points; tabs become four spaces. Line breaks and font layout can differ from the HTML preview.
Add a layer to begin.
A QUICK WALKTHROUGH
How to use this tool
- Add a frame placeholder, text label or info panel.
- Select a layer and edit its bounded position, text and appearance.
- Download a standalone HTML/CSS overlay and inspect it in your chosen setup.
Layer settings
Local design only: fixed 1920×1080 transparent HTML/CSS layout, up to 16 frame placeholders, labels or panels. Click a layer or use the selector, then edit its position, dimensions, title, text, colors, border and opacity. New layers appear above earlier layers. Text is clipped to its box. No dragging, camera/video capture, live alerts, platform connection or deployment. The downloaded standalone HTML has no scripts or external assets. Inputs are not uploaded or saved by the app; downloads save only when requested.
Layout preview
Limits: width 40–1920, height 40–1080, font 12–100, border 0–20 pixels, opacity 0–100. Checkerboard and selection outlines appear only in the preview. Preview is scaled; export keeps fixed pixel dimensions.
Download transparent PNG
PNG is drawn directly from the layers on a transparent 1920×1080 Canvas, not a rasterized HTML screenshot. Text wraps by Unicode code points; tabs become four spaces. Line breaks and font layout can differ from the HTML preview.
GOOD TO KNOW
Common questions
Does the export include live alerts or platform connections?
No. This creates a static layout only; it does not connect live content, platforms, or deployment services.
How is the PNG created?
It draws the layers directly onto a transparent 1920×1080 canvas rather than taking a screenshot of the HTML preview.