Canvas Docs

Gradients

List of Gradient Utility Classes included with Canvas.

Classes

ClassesDescription
.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.
Example: [ch_pre]
...
[/ch_pre]
.gradient-textApplies the Gradient as a Text on the Element.
Example: [ch_pre]
...
[/ch_pre]
.gradient-underlineApplies the Gradient as an Underline on the Element.
Example: [ch_pre]
...
[/ch_pre]