Gradients

Canvas ships a set of ready made background gradients plus a gradient text helper. Each gradient is a linear-gradient applied as background-image.

Gradient backgrounds

Class	Feel
`.gradient-sunset`	Warm sunset
`.gradient-ocean`	Ocean blues
`.gradient-ocean-hue`	Ocean hue variant
`.gradient-sky`	Sky
`.gradient-sky-hue`	Sky hue variant
`.gradient-horizon`	Horizon
`.gradient-earth`	Earthy
`.gradient-lemon`	Bright lemon
`.gradient-blue-green`	Blue to green
`.gradient-green-blue`	Green to blue
`.gradient-blue-purple`	Blue to purple
`.gradient-purple-blue`	Purple to blue
`.gradient-green-dark`	Green to dark
`.gradient-grey-brown`	Grey to brown
`.gradient-grey-orange`	Grey to orange
`.gradient-light-pink`	Light pink
`.gradient-light-grey`	Light grey
`.gradient-light`	Light
`.gradient-dark`	Dark
`.gradient-multiples`	Multi color

Each gradient also has a hover twin (.h-gradient-sunset, .h-gradient-ocean, and so on) that applies the gradient on hover.

Gradient text

.gradient-text clips a background gradient to the text. Pair it with any gradient background class:

<h1 class="gradient-text gradient-blue-purple">Gradient headline</h1>

Under the hood it sets -webkit-background-clip: text and a transparent fill.

Usage

Gradient hero background:

<section class="gradient-ocean text-white py-6">
  <div class="container">
    <h1>Ocean gradient section</h1>
  </div>
</section>

Gradient on hover (for example a call to action):

<a href="#" class="d-inline-block p-3 rounded-3 gradient-light h-gradient-sunset">
  Hover me
</a>

There is also .gradient-underline for gradient underline effects on links.

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. Example: [ch_pre] ... [/ch_pre]
`.gradient-text`	Applies the Gradient as a Text on the Element. Example: [ch_pre] ... [/ch_pre]
`.gradient-underline`	Applies the Gradient as an Underline on the Element. Example: [ch_pre] ... [/ch_pre]

Was this page helpful?