Question

使用线性渐变在CSS中创建彩虹很容易。

#grad1 {
  height: 200px;
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
}

<div id="grad1"></div>

但是看看吧！这个梯度在美学上令人恐惧。斑驳，端点交汇处有丑陋的纯色条带，无法很好地循环，不平滑，并且当它们无缝融合时颜色之间会形成鲜明的对比。

简而言之：这是一个可怕的梯度。

我想找到完美的渐变。一种以光滑，光滑的方式包裹彩虹的装置，不会留下任何明显的颠簸或视觉撕裂。该梯度不是平滑的混乱，而是平滑的曲线。

这个梯度存在吗？

Answer 1

您需要选择可以很好地融合在一起的颜色以及更多的色阶。

background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);

.rainbow-box {
    width: 80vw;
    height: 200px;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

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

我使用CSS渐变生成器制作的： https://cssgradient.io/

Answer 2

通过叠加红色，绿色和蓝色的各个颜色，尝试匹配人类对色锥的敏感度，可以获得更好的外观。

这里是一个例子，但是可以通过调整线性渐变中的一些％数值，以及使用更平滑的渐变形状（当前是具有截止顶部的三角形）来改进它。

private async Task BotCallback(ITurnContext turnContext, CancellationToken cancellationToken)
        {
            try
            {
                var conversationStateAccessors = _ConversationState.CreateProperty<DialogState>(nameof(DialogState));

                var dialogSet = new DialogSet(conversationStateAccessors);
                dialogSet.Add(this._Dialog);

                var dialogContext = await dialogSet.CreateContextAsync(turnContext, cancellationToken);
                var results = await dialogContext.ContinueDialogAsync(cancellationToken);
                if (results.Status == DialogTurnStatus.Empty)
                {
                    await dialogContext.BeginDialogAsync(_Dialog.Id, null, cancellationToken);
                    await _ConversationState.SaveChangesAsync(dialogContext.Context, false, cancellationToken);
                }
                else
                    await turnContext.SendActivityAsync("Starting proactive message bot call back");
            }
            catch (Exception ex)
            {
                this._Logger.LogError(ex.Message);
            }
        }

Answer 3

只是一个想法：您可以只指定红色，黄色和蓝色，而不是显式指定彩虹中的所有颜色。然后，颜色应该自然融合。

另一个想法：如果您不喜欢这些特殊的黄色，红色和蓝色，可以尝试使用RGB值的自定义阴影。尽管只使用了彩虹中的三种原色，但基本思想是相同的。

编辑：您可以通过在末尾添加红色来重新添加紫罗兰色。

#grad1 {
  height: 200px;
  background: linear-gradient(45deg, red, yellow, blue, red);
}

<div id="grad1"></div>

在CSS中创建完美的彩虹渐变

3 个答案: