Gradients, also known as colour transitions, are often used to provide realism, increase colour contrast, or to create the illusion of content fading into an interface or image.
Gradient foundations consist of ‘base’ and ‘inverse’ styles.
Dark when used in a light theme
'Base' gradient tokens fade elements into the interface background
Light when used in a dark theme
'Inverse' gradient tokens fade elements into a dark background in a light theme
When using gradients, ensure important UI elements like text and icons are legible without compromising the aesthetic.