gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:43:49 24 4
gpt4 key购买 nike

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

What I'm trying to do

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

感谢您的帮助! :)

最佳答案

.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>

关于html - CSS中具有多种颜色渐变的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37725609/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com