<h1 class="text-gradient text-primary">I'm a primary gradient text.</h1>
<h1 class="text-gradient text-info">I'm a info gradient text.</h1>
<h1 class="text-gradient text-warning">I'm a warning gradient text.</h1>
<h1 class="text-gradient text-danger">I'm a danger gradient text.</h1>
<h1 class="text-gradient text-success">I'm a success gradient text.</h1>
<h1 class="text-gradient text-dark">I'm a dark gradient text.</h1>

<div class="bg-gradient-primary text-center py-3 text-white border-radius-sm mb-2">Gradient primary</div>
<div class="bg-gradient-info text-center py-3 text-white border-radius-sm mb-2">Gradient info</div>
<div class="bg-gradient-warning text-center py-3 text-white border-radius-sm mb-2">Gradient warning</div>
<div class="bg-gradient-danger text-center py-3 text-white border-radius-sm mb-2">Gradient danger</div>
<div class="bg-gradient-success text-center py-3 text-white border-radius-sm mb-2">Gradient success</div>
<div class="bg-gradient-dark text-center py-3 text-white border-radius-sm mb-2">Gradient dark</div>

<div class="bg-primary-soft text-center py-3 border-radius-sm mb-2">Soft background primary</div>
<div class="bg-info-soft text-center py-3 border-radius-sm mb-2">Soft background info</div>
<div class="bg-warning-soft text-center py-3 border-radius-sm mb-2">Soft background warning</div>
<div class="bg-danger-soft text-center py-3 border-radius-sm mb-2">Soft background danger</div>
<div class="bg-success-soft text-center py-3 border-radius-sm mb-2">Soft background success</div>

<div class="card card-background card-background-mask-primary w-25 mb-2">
  <div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/team-working.jpg')"></div>
  <div class="card-body text-center">
    <h4 class="text-white up mb-0">Overlay Primary</h4>
  </div>
</div>

<div class="card card-background card-background-mask-info w-25 mb-2">
  <div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/team-working.jpg')"></div>
  <div class="card-body text-center">
    <h4 class="text-white up mb-0">Overlay Info</h4>
  </div>
</div>

<div class="card card-background card-background-mask-warning w-25 mb-2">
  <div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/team-working.jpg')"></div>
  <div class="card-body text-center">
    <h4 class="text-white up mb-0">Overlay Warning</h4>
  </div>
</div>

<div class="card card-background card-background-mask-danger w-25 mb-2">
  <div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/team-working.jpg')"></div>
  <div class="card-body text-center">
    <h4 class="text-white up mb-0">Overlay Danger</h4>
  </div>
</div>


<div class="card card-background card-background-mask-success w-25 mb-2">
  <div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/team-working.jpg')"></div>
  <div class="card-body text-center">
    <h4 class="text-white up mb-0">Overlay Success</h4>
  </div>
</div>

<div class="card card-background card-background-mask-dark w-25 mb-2">
  <div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/team-working.jpg')"></div>
  <div class="card-body text-center">
    <h4 class="text-white up mb-0">Overlay Dark</h4>
  </div>
</div>

<div class="d-flex">
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-0">.opacity-0</div>
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-1">.opacity-1</div>
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-2">.opacity-2</div>
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-3">.opacity-3</div>
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-4">.opacity-4</div>
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-5">.opacity-5</div>
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-6">.opacity-6</div>
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-7">.opacity-7</div>
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-8">.opacity-8</div>
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-9">.opacity-9</div>
  <div class="bg-primary border-radius-sm p-2 text-white mb-1 opacity-10">.opacity-10</div>
</div>

<div class="container">
  <div class="row my-4">
    <div class="col-2">
      <div class="card shadow-xs">
        <div class="card-body">
        .shadow-xs
        </div>
        </div>
    </div>
    <div class="col-2">
      <div class="card shadow-sm">
        <div class="card-body">
        .shadow-sm
        </div>
        </div>
    </div>
    <div class="col-2">
      <div class="card shadow-md">
        <div class="card-body">
        .shadow-md
        </div>
        </div>
    </div>
    <div class="col-2">
      <div class="card shadow-lg">
        <div class="card-body">
        .shadow-lg
        </div>
        </div>
    </div>
    <div class="col-2">
      <div class="card shadow-xl">
        <div class="card-body">
        .shadow-xl
        </div>
        </div>
    </div>
  </div>
</div>