An edge fade on a marquee

Mask, not overlay

A common way to fade the ends is to place two gradient-coloured boxes over them, matching the page background. That breaks as soon as the background is not a flat colour, or changes in dark mode. A mask fades the content itself, so it works on any background. The setting uses mask-image with a linear gradient, and the prefixed property for browsers that need it.

The setting

It is called Edge fade (%). Zero, the default, means no fade. A value between 1 and 30 is the share of the strip's width, at each end, over which items fade. 10 to 15 is a soft edge for a logo row; more starts to hide too much of the strip on a narrow screen.

Horizontal and vertical

For a strip that moves sideways the fade is at the left and right edges. For a vertical strip it is at the top and bottom. The same number does both jobs.

See it

Move the fade slider in the tool below and watch the ends of the strip.

One caution

A fade makes the items at the edge harder to read, because they are partly transparent. For a strip of text that has to be read, keep the fade small, or leave it off and let the text be cut off cleanly. For logos it is nearly always an improvement.