<h1 class="postTitle">
    <a id="cb_post_title_url" href="https://www.cnblogs.com/xgqfrms/p/10897934.html">
      css text gradient, css fonts gradient
    </a>
</h1>

<div class="gradient-colors">
    css text gradient, css fonts gradient
</div>

<hr/>

<div class="big-text rainbow">
  world
</div>

<div class="big-text rainbow">
   rainbow world 
</div>


<hr/>

<div class="big-text rainbow-colors">
  world
</div>


<div class="big-text rainbow-colors">
 rainbow-colors
</div>

<hr>



<div  class="seven">
  linear-gradient ???
</div>

<div class="seven">
  linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);">
  linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
</div>

<div class="seven-bg">
  linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);">
  linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
</div>
h1{
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.postTitle {
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: word-color-animation 5s infinite linear;
}
.postTitle:hover {
  // background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
  background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
}

.gradient-colors {
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    // -webkit-background-size: 200% 100%;
}

.big-text {
  font-size:  72px;
  font-weight: bold;
}

.rainbow {
  background-image: linear-gradient(135deg, #fe9eff, #99fffc 33%, #eaffa7 66%);
  // background-image: linear-gradient(135deg, #fe9eff, #99fffc 33%, #eaffa7 66%);
  // background-image: linear-gradient(to right bottom, #fe9eff, #99fffc, #eaffa7);
  // background-image: 
  //   linear-gradient(to right bottom, #fe9eff 0%, #99fffc 33%),
  //   linear-gradient(to right bottom, #99fffc 33%, #fe9eff 66%),
  //   linear-gradient(to right bottom, #fe9eff 66%, #fe9eff 99%);
  background-image: 
    linear-gradient(to right bottom, #fe9eff, #99fffc),
    linear-gradient(to right bottom, #99fffc, #fe9eff),
    linear-gradient(to right bottom, #fe9eff, #fe9eff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}


.rainbow-colors {
  background-image: linear-gradient(135deg, #0f0, #f0f, #00f);
  // background-image: linear-gradient(to right bottom, #0f0, #f0f, #00f);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.seven {
  background-image: linear-gradient(to right, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.seven-bg {
  background: linear-gradient(to right, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
}
View Compiled 
// https://www.cnblogs.com/xgqfrms/p/10897934.html
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.