CSS диагональный градиент с более плавным переходом

Question

Я никогда не использовал градиент раньше, и я пытаюсь добиться чего-то очень похожего на это

, как вы видите, этот бар имеет тот же цвети влево, и вправо, и чуть правее от середины, у него есть какой-то более яркий градиент, и я пытался получить такой же вид, пытаясь сначала сфокусироваться на градиентной части с помощью этих

    export class LeaderboardBar extends React.Component<Props, State>
{
    render()
    {
        return (
            <div>
            <div id="leaderboard-bar-left">
            </div>
            <div id="leaderboard-bar-right">
            </div>
            </div>
        )
    }
}

иэтот css

    #leaderboard-bar-left {
    width: 60%;
    height: 40px;
    background: linear-gradient(to top left, #1e2933 50%, #39424B 30%);
    position: absolute;
    top: 0;
    left: 0;
}

#leaderboard-bar-right {
    width: 40%;
    height: 40px;
    background-color: #1e2933;
    position: absolute;
    top: 0;
    right: 0;
}

но это только дает мне такой градиент

я не могу заставить транзит статьЧем ярче, тем дальше к разрыву в диагональном градиенте, как это достигается?

Answer 1

Вы можете попробовать несколько градиентов, как это:

.box {
  height:50px;
  background:
    linear-gradient(#1e2933,#1e2933) right/120px 100%,
    linear-gradient(to bottom right, transparent 47%, #1e2933 52%) calc(100% - 118px) 0/40% 100%,
    linear-gradient(to right, #1e2933 , #39424B 50%);
  background-repeat: no-repeat;
}

body {
 margin:0;
}

<div class="box"> 
</div>