如何创建不同角度和颜色的多个线性渐变

Question

我正在尝试创建主卡，目前正在其背面工作，但我不知道如何创建像这样的多个线性渐变。

1234567数字后面的部分。

就我而言，我想将那些灰白到灰白重新创建为

linear-gradient(to right ,orange, lightblue, orange)

。

看到this问题后，我尝试帮助我聊天gpt，但他不明白我想说的是什么。

在这个问题中有一个网站。当我尝试更改它的代码时，事情变得容易一些，但我不明白如何将那些灰线更改为右侧。

这是为了更好地解释自己而编写的代码。

div{
width:100%;
height:300px;
background:#fff;
border: 3px solid #000;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
gap: 10px;
}

span{
width:100%;
height: 10px;
background: linear-gradient(to right, orange, lightblue,orange);
display:block;
}

<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Answer 1

您可以使用这样的工具来创建自己的渐变：https://cssgradient.io/

您可能想使用多个背景规则，而不是使用多个span标签，不完全是这样，而是朝这个方向发展：

div{
  width:100%;
  height:300px;
  background:#fff;
  border: 3px solid #000;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap: 10px;
}

span{
  width:100%;
  height: 300px;
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(130,129,147,1) 20%, rgba(3,2,52,1) 38%, rgba(125,125,147,1) 58%, rgba(9,9,121,1) 75%, rgba(0,212,255,1) 100%);
}

<div>
  <span></span>
</div>