Gradient Fade
Indigo-to-magenta gradient words slide left and fade softly at both edges, over any background, light or dark.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Gallery has 44 effects, including 6 free. Explore the category →
3 usage examples
How it works
The edge fade is a mask set on .gfmq-viewport: mask-image makes the band transparent over its first and last 100 pixels (--gfmq-fade). Whatever the page behind shows comes through. The old version painted two #0a0a0f veils over the text; on a white background or a photo, they turned into two dark rectangles.
The gradient is painted into the letters with background-clip: text, on each list: it starts at --gfmq-color at the beginning of the list and reaches --gfmq-to at its end. Since the script copies the whole list, every duplicate carries exactly the same gradient, and moving from one duplicate to the next goes unnoticed.
The number of duplicates is worked out from the band's real width, which removes the gap that opened on the right past roughly 1,000 px. Scrolling runs at 65 px per second (data-speed), stops under the mouse and freezes with the Pause button set at the end of the band, outside the fade.
Accessibility
- Stopping the motion: hover over the band, or the Pause button (
aria-pressed) usable by click, finger and keyboard — the motion lasts over 5 seconds, so WCAG 2.2.2 requires it. - Real text: the words are HTML text, selectable and read by screen readers; only the duplicates, marked
aria-hidden="true", are skipped. Before the repair, every word was announced twice. - Legibility: on #0a0a0f, the starting indigo reaches 4.4:1 and the magenta 5.7:1. In the faded areas the text deliberately turns pale: do not put essential information only there; it is readable in the middle.
- Reduced motion: with
prefers-reduced-motion: reduce, the band stops on the original list, keeps its gradient and faded edges, and can be scrolled by hand; when it overflows, it also takes keyboard focus (Tab) and scrolls with the arrow keys. - Focus: a link in the band reached with the keyboard holds the band still at its start and brings it into view; links in the duplicates are skipped (
tabindex="-1").
Browser compatibility
CSS mask (mask-image, with its -webkit- form for Chrome before 120 and Safari before 15.4), gradient text (background-clip: text, with -webkit-background-clip), CSS animation and 4.5 KB of commented JavaScript. Measured in Chromium 151, Firefox 153 and WebKit 26.5, over a dark and a white background: faded edges with no dark strip, no gap at 1,900 px, 0 errors.
Without CSS masks, the edges are sharp. Without background-clip: text, the words show in plain --gfmq-color (the text colour stays declared). Without JavaScript, the words stand still and can be scrolled by hand.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0193-root" data-speed="65" data-direction="left">
<div class="gfmq-band">
<div class="gfmq-viewport">
<div class="gfmq-track">
<ul class="gfmq-group" role="list">
<li>Your slogan</li>
<li>Second message</li>
</ul>
</div>
</div>
<button type="button" class="gfmq-toggle" aria-pressed="false" aria-label="Pause"></button>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Messages (HTML — <li> of .gfmq-group) |
4 messages | Written once; the script adds the duplicates. |
--gfmq-color → --gfmq-to |
#6366f1 → #d946ef | Start and end of the gradient. On a light background, pick two dark hues. |
--gfmq-fade |
100px | Width of each faded edge. 0 for sharp edges. |
data-speed / data-direction |
65 / left | Pixels per second and direction (right for the reverse). |
--gfmq-size / --gfmq-space |
1.5rem / 4rem | Word size and gap between two messages. |
--gfmq-height / --gfmq-bg / --gfmq-padding |
180px / #0a0a0f / 1rem 0 | Demo frame; auto, transparent, 0 inside a page. |
--gfmq-button / --gfmq-button-size |
rgba(255, 255, 255, .8) / 2rem | Hue and diameter of the Pause button. |
FAQ
--gfmq-bg: transparent)..gfmq-viewport with a one-edge gradient, for instance linear-gradient(to right, transparent, #000 var(--gfmq-fade)) to fade the left side only.
