<h1>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</h1>

<hr>

<h2>CSS property browser support</h2>
<ul>
  <li><code>background-clip</code> &ndash; <a href="https://caniuse.com/background-clip-text">https://caniuse.com/background-clip-text</a></li>
  <li><code>text-fill-color</code> &ndash; <a href="https://caniuse.com/mdn-css_properties_-webkit-text-fill-color">https://caniuse.com/mdn-css_properties_-webkit-text-fill-color</a></li>
</ul>

body {
  background-color: #f5f5f5;
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  padding: 40px;
}

h1 {
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,0,123,1) 35%, rgba(0,212,255,1) 100%);
  /* https://caniuse.com/background-clip-text */
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 4rem;
  /* https://caniuse.com/mdn-css_properties_-webkit-text-fill-color */
  -webkit-text-fill-color: transparent;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.