CSS中具有多种颜色渐变的文本

【问题标题】：Text with multiple color gradient in CSSCSS中具有多种颜色渐变的文本
【发布时间】：2016-10-10 02:03:34
【问题描述】：

如何使用 CSS 创建如下图所示的多色文本？

文本使用了某种随机不同的颜色，我想做一些看起来相同的东西。这是来自一张图片，所以我不能只在页面的源代码中寻找答案。

感谢您的帮助！ :)

【问题讨论】：

嗨，我不知道它是否准确地回答了你想要的，但似乎与你的问题有关：stackoverflow.com/questions/7261680/… 并且其中一个答案链接到一个页面：webdesignerwall.com/tutorials/css-gradient-text-effect
要求我们建议、查找或推荐书籍、工具、软件库、插件、教程或其他场外资源的问题对于 Stack Overflow Stack Overflow 来说是题外话
最好使用 SVG 完成，请参阅 stackoverflow.com/questions/8005447/…

【解决方案1】：

.gradient2:before {
    background: rgba(0, 0, 0, 0) radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670) repeat scroll 0 0;
    content: "";
    display: block;
    mix-blend-mode: screen;
}
.gradient2:before, .gradient2:after {
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.gradient2:after {
    background: #04161f none repeat scroll 0 0;
    color: white;
    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.";
    mix-blend-mode: multiply;
}

.gradient2 {
    background: white none repeat scroll 0 0;
    color: black;
    margin: 1em auto;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 0 #04161f, 1px -1px 0 #04161f, -1px -1px 0 #04161f, -1px 1px 0 #04161f;
    width: 10em;
}

<body>
<p class="gradient2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.</p>
</body>

【讨论】：