css text gradient color, css fonts gradient color All In One

css text gradient color, css fonts gradient color All In One

CSS 字体渐变色

demos

.colorful {
/*   color: #e84855; */
/*   background-color: linear-gradient(45deg, 0% #0f0, 100% #f0f); ❌ 0% #0f0 !== color percent */
/*   background-color: linear-gradient(45deg, #0f0 0% , #f0f 100%); ❌ background-color */
/*   background: linear-gradient(45deg, #0f0 0% , #f0f 100%); ✅ background & linear-gradient */
/*     background-image: -webkit-gradient(linear,0% 50%, 50% 100%, from(#ff2c2c), to(#f0f)); */
    background-image: linear-gradient(to right, #0ff, #2ff32f, yellow, #f0f);
    -webkit-background-clip: text;
/*     -webkit-text-fill-color: transparent; */
  color: transparent;
}

gradient text & gradient background

https://www.cnblogs.com/xgqfrms/p/11882034.html

-webkit-background-clip & -webkit-text-fill-color

.class{
    background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#ff2c2c),to(#7a5e91));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.entry-title {
    font-size: 50px;
    font-weight: 500;
    margin: 20px 0;
    border-top: 2px solid #ecd018;
    border-bottom: 2px solid #ecd018;
    line-height: 1.4;
    padding: 20px 0;
    background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#ff2c2c),to(#7a5e91));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<h1 class="postTitle">
    <a id="cb_post_title_url" class="postTitle2" href="https://www.cnblogs.com/xgqfrms/p/10897934.html">
        shit mint-ui & vue mobile ui components
    </a>
</h1>

.postTitle {
    background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, 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;
}

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/background

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");

/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

multiple background images

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

同时应用多个背景图片

.myclass {
  background: background1, background2, /* … ,*/ backgroundN;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---