Content Fade is a visual gradient-mask wrapper that suggests content continues beyond the visible area. Use it on clipped or scrollable previews when an edge should fade out instead of ending abruptly.
Use it for:
- Fading horizontal preview text, teaser rows, chips, compact lists, or cropped inline content.
- Showing a soft visual cue at the start, end, or both sides of an already constrained area.
- Matching the gradient color to the parent background with
color. - Adjusting the gradient size with
width.
Content Fade does not manage overflow, scrolling, expansion, or truncation by itself. Put it inside a container that sets the width, height, scroll behavior, or overflow-hidden. Do not use it for loading skeletons, collapsed content logic, tooltips, pagination, modal clipping, ellipsis truncation, or long article reading.