OneTaskBy Tim King · Updated
Scanline Effect
Fine Horizontal Lines and a Sweeping Bright Band for Any Section
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Scanline Effect works
A scanline effect lays thin horizontal lines over a section so it looks like an old CRT monitor or arcade screen. Pick the line colour, spacing and strength, add a band that sweeps down the screen, and copy the HTML and CSS. No images and no script.
Scanlines are a quick way to give a page a retro, terminal or sci-fi mood. They sit on top of the content as a see-through layer, so the text underneath stays real text that can be selected and read by screen readers.
How the scanline effect is drawn
The lines are one repeating-linear-gradient on a ::before layer: a 1px stripe of your colour
followed by a clear gap, repeated down the whole section. The spacing input sets the gap and the
strength input sets the alpha of the stripe. The sweep is a soft gradient band on ::after that
moves from above the top edge to below the bottom with a transform animation.
Accessibility and motion
Both layers use pointer-events: none, so links and buttons under them still work. The sweep is
switched off for visitors who ask for reduced motion, and the still lines stay because they do not
move. Keep the strength low over body text so it stays easy to read.
FAQ
Will the scanline effect slow my page down?
No. The lines are a single gradient that the browser paints once, and the sweep animates only a transform, which the browser can move on the graphics card without repainting the whole section.
How do I make the lines look more like a real CRT?
Use a spacing of 3 or 4 pixels, a dark background, a strength around 20 percent and a cyan or green line colour. Pair it with a subtle glow on the heading for the classic phosphor look.
Can I put scanlines over an image or video?
Yes. Put the image or video inside the section behind the text. The scanline layer sits on top of everything in the section, so the lines cover the image as well as the background colour.
Why do the lines look blurry on some screens?
On screens that scale the page by an odd amount, a 1px line can land between two physical pixels and look soft. A spacing of 4 or more pixels usually looks crisp on most phones and laptops.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Glow Effect
Neon glow for headings and buttons, pure CSS.
Spotlight Effect
A soft glow that follows the mouse across your hero.
CSS Pattern Generator
Repeating background patterns built from CSS gradients, no images.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Starfield Background
Make stars stream past as if flying through space.