Gradient Utility Class Reference

Gradient utility classes will alter the background of their container to either a horizontal (h) or vertical (v) gradient. These are available in three different colour schemes — examples below.

Please note: the custom properties values are the same as the utility classes, just with the added -- in front. Example: --gradient-h-grey-dark

Gradient Examples (reference)

gradient-h-grey-dark Link

gradient-v-grey-dark Link

gradient-h-grey-light Link

gradient-v-grey-light Link

gradient-h-blue Link

gradient-v-blue Link

Larger Gradient Examples (in full-width)

These gradients are placed inside of full-width container so they span the full page. Content is then contained inside of a wrapper class. All of these are contained inside of a flow-0 class in order to not have space between the sections.

Horizontal blue Gradient. gradient-h-blue

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi alias officia atque natus nihil dicta labore rem ducimus perferendis error?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta earum maiores, veritatis voluptatibus culpa labore nemo incidunt explicabo optio facere eaque vel deserunt sint quidem molestiae quod distinctio? Reprehenderit numquam, laudantium non nemo molestiae voluptate ipsam iure totam mollitia modi tenetur, impedit exercitationem obcaecati sapiente quia veritatis qui inventore libero?

Vertical grey-light Gradient. gradient-v-grey-light

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi alias officia atque natus nihil dicta labore rem ducimus perferendis.

This is not a gradient. This is not a full width container.

Can you see the line from the gradient above?

I am throwing in a non-gradient section here to see what a white section would look like coming after a grey-light vertical gradient which goes from grey to white. This is not a full bleed section and doesn't need the wrapper class added. This is also tucked inside a wrapper class limiting the content to 45rem.

Vertical blue Gradient. gradient-v-blue

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi alias officia atque natus nihil dicta labore rem ducimus perferendis error?

Horizontal grey-light Gradient. gradient-h-grey-light

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi alias officia atque natus nihil dicta labore rem ducimus perferendis error?

Horizontal grey-dark Gradient. gradient-h-grey-dark

Knowing is Knowing.

This is not a gradient. This is not a full width container.

You can obviously see the line from the gradient above?

I am throwing in a non-gradient section here to separate out the two dark full bleed sections. This is not a full bleed section and doesn't need the wrapper class added. This is also tucked inside a wrapper class limiting the content to 45rem.

Vertical grey-dark Gradient. gradient-v-grey-dark

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi alias officia atque natus nihil dicta labore rem ducimus perferendis error?