Why stitched screenshots have a line at the seam
If a stitched capture shows a dark band every few hundred pixels, at a perfectly regular pitch, the cause is almost never the stitching arithmetic. It is shading baked into each tile.
Confirm it is a seam, not content
Before fixing anything, check three things in the finished image:
- Pitch. Measure the distance between two bands. If it equals the height of one captured screenful, it is a seam. If it varies, it is document content — page gutters in a document viewer, for example, are not artefacts.
- Width. A seam artefact runs edge to edge, including the grey margins outside the content column. Real content stops where the content stops.
- Top and bottom of the whole image. If the very first rows and the very last rows are also darker than their neighbours, the shading belongs to the capture area's edges — which is exactly what produces a doubled band where two tiles meet.
The usual cause
Many scrollable containers draw something at their top and bottom edge: an inset box shadow, a scroll-fade gradient, a hairline border. It is a few pixels tall and easy to miss on screen. Every tile you capture includes it, because every tile is a picture of that container.
Stitch the tiles edge to edge and the dark bottom of one tile lands directly against the dark top of the next, so the band in the result is twice as strong as anything visible on screen. In a capture we measured, the rows either side of a seam ran 224, 193, 157 · 157, 193, 224 on a background of 224 — a symmetric trough, full width, at exactly the tile pitch.
The fix: overlap, then cut in the middle
Scroll by slightly less than one screenful so consecutive tiles overlap, then join them at the centre of the overlap instead of at their edges. Each tile contributes only its middle, so the shaded rows are discarded from both sides. An overlap of about 24 px is plenty for the shadows we have measured, and costs a few percent more tiles.
This works without knowing anything about the site's CSS, which matters — the shading can come from a box shadow, a pseudo-element overlay or a background gradient, and you cannot reliably suppress all three from outside the page.
ScrollStudio does this automatically; there is nothing to turn on. Two related fixes belong with it: capture the inside of the container so its border and scrollbar are never included, and derive each tile's source height from its destination height so a rounding difference does not resample every seam by a fraction of a pixel.
What it does not fix
The first few rows of the whole image and the last few rows still carry the container's own shading, because those are the real edges of the captured area and the shading sits on top of real content there. Removing them would delete content, so they stay.
Guides
- How to save a whole web page as an A4 PDF
- How to split a long screenshot into pages
- How to screenshot a scrolling panel inside a page
Free, no account, nothing uploaded.