Loading page
About this tool
Create CRT scan line, aperture grille and RGB mask overlays as transparent SVG or PNG with copyable CSS.
Scan Line Overlay Generator builds CRT-style stripe overlays — horizontal scan lines, a vertical aperture grille, an RGB shadow mask or interlaced field lines — and exports them as a transparent SVG, PNG or pure CSS. The pattern is described by a period (start of one line to the start of the next) and a thickness, so surface coverage is thickness ÷ period and the average light removed is coverage × opacity. It also matches real display standards: 486 active lines for NTSC, 576 for PAL, 480 for VGA and 200 for CGA.
Open Scan Line Overlay Generator on AltFTool — it loads instantly in your browser.
Set Width (px) and Height (px), pick a Pattern style of Horizontal scan lines, Aperture grille (vertical), RGB shadow mask triads or Interlaced field lines, then set Line period (px), Line thickness (px), Opacity (0-1) and a Line tone of dark or light lines.
Tap a "Match a CRT standard at this height" chip — NTSC 525i (486 active lines), PAL 625i (576 active lines), VGA 640×480 or CGA 320×200 — to set the period from your output height; a period under 4 px is flagged as a moiré risk.
"Perceived brightness change" reports the light removed, with Surface coverage, Average alpha and Line density listed. "SVG" and "PNG" download the transparent overlay as scanlines-horizontal-4px.svg or .png, and "Copy CSS" copies the repeating-gradient block shown under "CSS-only version".
Coverage, average alpha and the resulting brightness change are calculated, not guessed at by eye.
One click sets the period to match NTSC, PAL, VGA or CGA active line counts at your output height.
Transparent SVG, transparent PNG and a repeating-gradient CSS block, all from the same settings.
Match the standard you are imitating: NTSC 525-line systems show 486 active lines, PAL and SECAM 625-line systems show 576, VGA shows 480 and CGA shows 200. On a 1080-pixel-tall canvas that works out to a period of roughly 2.2 px for NTSC; PAL's raw ratio is about 1.9 px, which falls under the tool's 2 px minimum period, so it is rounded up to 2 px — the smallest stripe the overlay can draw without failing validation.
A stripe period under about 4 CSS pixels aliases against the display grid once the overlay is scaled or the browser zoom is not a whole number. Either increase the period, or export at exactly the display size so no resampling happens.
Multiply coverage by opacity. A 2 px line on a 4 px period covers 50% of the surface, so at 0.35 opacity it removes about 17.5% of the light. Compensate by raising the underlying image's brightness before the overlay goes on.
An aperture grille (Trinitron-style) uses continuous vertical stripes, so the overlay is vertical lines. A shadow mask uses discrete red, green and blue phosphor triads, which reads as a tinted three-stripe repeat rather than a plain darkening.