CSS Text Gradients

css-gradient.css

.heading_gradient_blue h2 span {
  display: inline-block;
  color: #254E87; /*non-webkit fallback*/
  background: -webkit-linear-gradient(135deg, #2CA44F, #28766D, #254E87);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading_gradient_pink h2 span {
  display: inline-block;
  color: #254E87; /*non-webkit fallback*/
  background: -webkit-linear-gradient(135deg, #D5A06D, #D1817D, #CE5888);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

css-gradient.html

<div class="heading_gradient_blue">
  <h2><span>An wonderful example of a gradient </span></h2>
</div>