Gradient Utility Classes
Gradient Utility Classes
| Website Documentation / WebteamGradient utility classes will alter the background of their container to either a horizontal (h), vertical (v) or vertical reversed (vr) gradient. These are available in multiple different colour schemes — examples below.
The gradient utility classes are not available as options in most default components. These are best used in the "Full Width Section" container component under "Add Classes".
Please note: the custom properties values are the same as the utility classes, just with the added -- in front. Example: --gradient-h-grey-light
Gradient Examples (reference)
The blue and grey-dark gradients are difficult to see in small boxes (like above) but look better in larger contexts — see our global footer as an example.