Image Scanline

What is an image scanline effect?

The scanline effect overlays evenly spaced horizontal dark lines across an image, mimicking the appearance of an old cathode-ray tube (CRT) monitor or analog television. On a real CRT, an electron beam traced the picture one line at a time, and the gap between each pass left a faint dark stripe between rows of phosphor. Reproducing those stripes digitally instantly gives any still image a retro, broadcast or arcade feel that is hard to fake any other way.

This tool reproduces that look entirely in your browser. You upload an image, choose how tightly packed the scanlines should be with the line frequency slider, and the tool walks every row of pixels, darkening every Nth row to leave a crisp dark stripe. Because the whole pipeline runs locally with JavaScript and the Canvas API, nothing is uploaded and the result is ready almost instantly.

How the scanline filter works

Under the hood the tool uses the Canvas 2D API. The source image is drawn onto an off-screen canvas, then getImageData returns the raw pixel buffer. The line frequency slider controls the period of the pattern — with a value of N, every Nth horizontal row is selected as a scanline. For each pixel on a scanline row, the red, green and blue channels are multiplied by 0.5, halving their brightness and producing a distinct dark stripe. Rows in between are left untouched, so the bright rows stay bright and the dark rows fall to half intensity.

A frequency of 1 turns every row into a scanline and darkens the whole image uniformly, while a frequency of 10 leaves nine bright rows for every darkened one, producing a very subtle stripe. The default of 3 strikes a balance — one dark line for every two bright lines — which reads as a convincing CRT phosphor mask at typical viewing distances.

Scanline vs other retro effects

Scanlines are often confused with other vintage image treatments, but they do something quite specific. Whereas a sepia or grain filter changes the color or adds random noise across the whole picture, a scanline is strictly geometric: it imposes a regular horizontal grid of dark stripes without altering hue or adding randomness. This makes scanlines the go-to choice when you want to suggest a screen rather than a film stock.

Compared to a pixelation filter, scanlines preserve all of the original detail and only modulate brightness row by row, so the underlying image is still readable — it just looks like it is being displayed on a CRT. Scanlines also pair beautifully with other retro effects: a touch of bloom or chromatic aberration on top of scanlines sells the "captured from an old monitor" look far more convincingly than any single effect alone.

When to use scanlines

Scanlines are a stylistic choice used across game art, graphic design and video production whenever a piece needs to feel like it is being shown on an old screen. Common scenarios include:

• Game art and screenshots. Make UI mockups, character portraits or environment stills look like they were captured from a 1980s arcade cabinet or 16-bit console running on a CRT.
• Retro branding and posters. Overlay scanlines on hero images for synthwave, vaporwave or cyberpunk themed designs to reinforce the analog-tech mood.
• Video thumbnails and title cards. Give a still frame the look of a paused VHS tape or broadcast monitor, hinting at found-footage or sci-fi storytelling.
• Web and UI design. Use a subtle scanline texture as a background or accent to suggest a terminal, dashboard or heads-up display.
• Privacy and stylization. A scanline overlay can soften identifying detail in a screenshot while keeping the overall composition recognizable.

Whenever you want an image to feel screen-bound, broadcast or arcade-era, scanlines are the fastest way to get there.

How to add scanlines to an image

Adding scanlines takes only a few seconds and runs completely in your browser — no uploads, no sign-up, no watermark. Follow these steps:

1. Upload your image. Click the upload area or drag and drop a JPG, PNG, WebP, GIF or BMP file. The image is decoded and previewed instantly.
2. Set the line frequency. Use the slider from 1 to 10. Lower values pack the scanlines tightly; higher values space them out for a subtler stripe.
3. Choose an output format. Pick PNG for lossless quality, JPG for smaller photos, or WebP for a modern balance of size and quality.
4. Click Apply Scanline. The tool processes the image and shows the original and result file sizes side by side.
5. Download the result. Click "Download Scanline" to save the image. The original file stays untouched on your device.

Because every step runs locally in your browser using JavaScript, your image is never uploaded to a server. This makes the tool completely private, fast and suitable for sensitive images.