Fade

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

Dithered transparent-to-background transition using 4×4 Bayer ordered dithering. Avoids visible banding from CSS gradients. Common use case: placing at the edge of a content area to indicate overflow.

Every pixel it draws is the background at full ink, so it is the way to fade content out on the frame, where an opacity-* would turn the text grey.

The last band is solid background, so the fade ends with nothing of the content showing through, even when a preview draws it scaled.

The Fade SVG is absolutely positioned with pointer-events: none, so it occupies zero space in the layout flow. Place it inside a position: relative container to anchor it to the desired edge.

Import

import { Fade } from "~lib/layout/fade";

Props

Name	Type	Required	Default	Description
`direction`	`"to-top" \| "to-bottom" \| "to-left" \| "to-right"`	No	`"to-bottom"`	Fade direction
`size`	`number`	No	`40`	Thickness of fade in px

Examples

Import​

Props​

Examples​

Default (to-bottom)​

To Top​

To Left​

To Right​

Large Size​

See Also​

Import

Props

Examples

Default (to-bottom)

To Top

To Left

To Right

Large Size

See Also