Fade

Updated: May 9, 2025

The Fade component creates a gradient fade effect that transitions from a base color to transparent in a specified direction. It can be used to create visually appealing overlays, masks, or transitions between content areas.

Fade

<Flex border="brand-alpha-medium" fillWidth aspectRatio={4 / 3} radius="l" overflow="hidden">
  <Media src="/image.jpg" />
  <Fade
    fillWidth
    position="absolute"
    top="0"
    to="bottom"
    topRadius="l"
    height={12}
    pattern={{ display: true, size: "2" }}
  />
  <Fade
    fillWidth
    position="absolute"
    bottom="0"
    to="top"
    bottomRadius="l"
    height={12}
    pattern={{ display: true, size: "2" }}
  />
</Flex>

Direction

Control the direction of the fade effect.

Direction

Fade from left to right

<>
  <Fade
    fill
    position="absolute"
    left="0"
    to="right"
    leftRadius="l"
  />
  Fade from left to right
</>

Base color

Customize the base color of the fade effect.

Base color

Match base color with background

<>
  <Fade
    fill
    position="absolute"
    base="brand-medium"
    top="0"
    to="bottom"
    topRadius="l"
  />
  Match base color with background
</>

Pattern

Add a dot pattern to the fade effect.

Pattern

Dot pattern

<>
  <Fade
    fill
    position="absolute"
    base="page"
    bottom="0"
    to="top"
    bottomRadius="l"
    pattern={{ display: true, size: "8" }}
  />
  Dot pattern
</>

Blur

Add a blur effect to the fade.

Blur

Blur size

<>
  <Fade
    fill
    position="absolute"
    base="page"
    bottom="0"
    to="top"
    blur={2}
    bottomRadius="l"
  />
  Blur size
</>

API reference

Prop	Type	Default
className	string	—
to Which way it fades out.	bottomtopleftright	bottom
base The colour it fades from. Match the surface behind it, or the fade shows as a band of the wrong colour.	BaseColor	page
blur Backdrop blur behind the fade, in rem.	number	0.5
pattern Overlay a dot pattern in the base colour, and at what spacing.	{ display?: boolean; size?: SpacingToken; }	{ display: false, size: "4", }
style	React.CSSProperties	—
children	React.ReactNode	—
…and every FlexProps prop	inherited	—

ComponentsEmojiPickerDropdown

ComponentsFeedback

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club