Add CRT Scanlines
Give an image the look of a cathode-ray tube: darkened lines between the bright ones, an optional RGB phosphor tint, and a subtle corner falloff. It is the standard retro treatment for pixel art, game screenshots and 80s-styled graphics, and doing it as a real pass over the pixels beats a CSS overlay when you need a file rather than a web page.
Drop images here
Multiple files allowed
Getting the spacing right
Scanlines only read as scanlines when they sit at the right scale relative to the content. A CRT drew a few hundred visible lines regardless of what was on them, so on a 240p game upscaled to 1080p each original line is about four screen pixels tall — spacing 4, thickness 1 or 2. Set the spacing too fine relative to the image and you get a grey wash instead of lines; too coarse and it reads as blinds rather than a screen.
Start from the image height. Divide it by the number of lines the original display had — 240 for a console, 200 for early PC modes, 480 for later ones — and use that as the spacing. If the image is a modern screenshot with no such history, spacing 3 with thickness 1 is the safe default: dense enough to read as texture, coarse enough to be visible.
The other two controls
RGB aperture-grille tint imitates the coloured phosphor stripes of a Trinitron-style tube by biasing successive pixel columns toward red, green and blue. At normal viewing size the eye blends them back into the original colour with a faint shimmer, which is precisely how the real thing worked. It is subtle by design — enough to change the texture, not enough to shift the palette.
Vignette darkens toward the corners, quadratically with distance from the centre. Real tubes lost brightness at the edges of a curved screen, and a little of it (10–25%) sells the effect more than heavy scanlines do. Past about 50% it stops looking like a screen and starts looking like a lens.
Everything is applied multiplicatively to the colour channels only, so the alpha channel passes through untouched and a transparent PNG stays transparent. Darkness at 100% makes the scanline rows fully black, which is harsher than any real display — 30–55% is the range that reads as authentic.
FAQ
Why does my image look muddy rather than retro?
Almost always spacing that is too fine for the image size. When a line and its gap are each one pixel, you are averaging them away rather than seeing them. Increase the spacing, or scale the image up first with Pixel-art upscale, which uses nearest-neighbour so the pixels stay crisp.
Should I upscale before or after?
Before. Applying scanlines at the source resolution and then scaling up smears them; upscaling first and then adding lines at the final size gives clean, sharp lines. Use an integer multiple and nearest-neighbour scaling for pixel art.
Does it work on photos?
Yes, and it is a quick way to make a photo look like it is being displayed on an old monitor — a security-camera or found-footage look. Add a vignette and keep the darkness low; photographs show the lines more readily than flat pixel art does.
Can I get the barrel curvature too?
Not here — that needs a geometric warp rather than a per-pixel pass. The vignette gives you the brightness falloff that usually accompanies it, which is most of the visual cue.