<h2 class="toc">Gradient</h2>

<p>The <code>.gradient-*</code> classes creates darkening gradients in a specified direction.</p>

{% apply view_source %}
<div>
  <svg width="80" height="60" class="gradient-tl bg-primary"></svg>
  <svg width="80" height="60" class="gradient-tc bg-primary"></svg>
  <svg width="80" height="60" class="gradient-tr bg-primary"></svg>
</div>
<div>
  <svg class="gradient-cl bg-primary" width="80" height="60"></svg>
  <svg class="            bg-primary" width="80" height="60"></svg>
  <svg class="gradient-cr bg-primary" width="80" height="60"></svg>
</div>
<div>
  <svg class="gradient-bl bg-primary" width="80" height="60"></svg>
  <svg class="gradient-bc bg-primary" width="80" height="60"></svg>
  <svg class="gradient-br bg-primary" width="80" height="60"></svg>
</div>
{% end %}

<p>These gradients can be applied over any background color.</p>

{% apply view_source %}
<svg class="gradient-bc bg-primary" width="40" height="40"></svg>
<svg class="gradient-bc bg-success" width="40" height="40"></svg>
<svg class="gradient-bc bg-warning" width="40" height="40"></svg>
<svg class="gradient-bc bg-danger" width="40" height="40"></svg>
<svg class="gradient-bc bg-light" width="40" height="40"></svg>
<svg class="gradient-bc bg-dark" width="40" height="40"></svg>
{% end %}

<p>The <code>.gradient-light</code> modifier creates lightening gradients instead of darkening ones.</p>

{% apply view_source %}
<div class="row">
  <svg class="gradient-tl gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="gradient-tc gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="gradient-tr gradient-light bg-primary m-1" width="80" height="60"></svg>
</div>
<div class="row">
  <svg class="gradient-cl gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="            gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="gradient-cr gradient-light bg-primary m-1" width="80" height="60"></svg>
</div>
<div class="row">
  <svg class="gradient-bl gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="gradient-bc gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="gradient-br gradient-light bg-primary m-1" width="80" height="60"></svg>
</div>
{% end %}
