Fade Recipes

Fade recipes offer utility patterns for creating visual fade effects that are compatible with any background color, pattern, or gradient.

• fade-block: Adds a fade effect to the top and bottom.

• fade-inline: Adds a fade effect to the left and right sides.

• fade-top: Fades out content at the top edge.

• fade-right: Fades out content at the right edge.

• fade-bottom: Fades out content at the bottom edge.

• fade-left: Fades out content at the left edge.