Gradients

Convey meaning through background-color and add decoration with gradients.

• Gradient orientations

• Gradient colors

  • Start color

  • End color

  • Middle color

• Using with states

  • Hover

• Customizing

¶Gradient orientations

You can apply a gradient background on any element by using the classes named using the format gradient-{orientation}.

The available gradient orientations are:

• gradient-top
• gradient-top-right
• gradient-right
• gradient-bottom-right
• gradient-bottom
• gradient-bottom-left
• gradient-left
• gradient-top-left

¶Gradient colors

There are 3 available classes to help you set the gradient stops: .start-{color}, .middle-{color}, .end-{color}. You can use any color from the extended palette, like .start-indigo-500. Each color has 9 different shades that can be used with the gradient class.

¶Start color

<div class="gradient-right start-indigo-500"></div>

¶End color

<div class="gradient-bottom-right start-teal-500 end-blue-500"></div>

¶Middle color

<div class="gradient-bottom-right start-teal-500 end-blue-500"></div>

¶Using with states

¶Hover

<div class="gradient-bottom-right start-teal-500 end-blue-500"></div>

¶Customizing

Learn how to change the default colors in the styleguide section.