Gradients

List of Gradient Utility Classes included with Canvas.

Classes

Classes Description
.gradient-*

Sets a gradient background on the Element

Available Gradient Classes
  • .gradient-light-grey
  • .gradient-green-dark
  • .gradient-grey-brown
  • .gradient-light-pink
  • .gradient-blue-purple
  • .gradient-multiples
  • .gradient-blue-green
  • .gradient-light
  • .gradient-grey-orange
  • .gradient-sunset
  • .gradient-dark
  • .gradient-lemon
  • .gradient-earth
  • .gradient-sky
  • .gradient-ocean
  • .gradient-horizon
  • .gradient-green-blue
  • .gradient-purple-blue
Hover
.h-gradient-{name} - Sets a Gradient Background on the Element on Hover.

Ex:

<div class="gradient-dark h-gradient-lemon">
	...
</div>

.gradient-text

Applies the Gradient as a Text on the Element.

Ex:

<div class="gradient-purple-blue gradient-text">
	...
</div>

.gradient-underline

Applies the Gradient as an Underline on the Element.

Ex:

<div class="gradient-ocean gradient-underline">
	...
</div>

Last Modified: July 10, 2020