比较 Divi 渐变生成器中的渐变类型

渐变类型是新的 Divi Gradient Builder 的一部分。 新的 Divi 渐变类型使您能够为背景添加不同的形状和颜色。 在这篇文章中，我们将比较这些渐变类型，并向您展示如何使用它们来创建独特的背景！

让我们开始吧。

什么是 Divi 梯度类型？

Divi 的新渐变生成器添加了几个新的渐变功能，包括渐变类型。 有四种渐变类型可供选择：

• 线性
• 圆
• 椭圆机
• 锥

每种类型都以不同的方式显示渐变。 它们用于塑造渐变以显示为线性颜色图案、圆形、椭圆形或圆锥形。 我们将在示例中详细了解这些内容。

渐变类型还受其他控件的影响，例如位置、是否重复、渐变滑块的测量单位以及将渐变置于背景之上。

每次调整都会对渐变产生很小或很大的影响。 渐变可以是微妙的，也可以是突出的。 只需一次调整即可进行小的或大的更改。

考虑到这一点，让我们看一些使用每种渐变类型的渐变示例。 我们将展示每种渐变类型的三个示例。 第一个将是您在网络上看到的标准渐变类型。 接下来的两个将更具实验性，只是为了看看可以用渐变类型做什么。

渐变类型示例

对于渐变类型示例，我使用 Divi 中提供的免费 Bed and Breakfast Layout Pack 的登录页面中的 hero 部分。 这部分已经有了渐变，但我们将替换它并做一些实验。 我们可以删除原始背景渐变或对其进行修改。 结果是一样的。 为简单起见，我将对其进行修改。

我自定义了标题文本，将其从黑色更改为白色。

线性渐变类型

线性渐变显示渐变，就好像它们在页面上展开一样。

第一个线性梯度示例

这是我们的第一个示例。 它在屏幕左侧显示较浅的颜色，在右侧显示较深的颜色，它们之间的过渡平滑。

要创建此示例，请添加两种颜色。 第一个是 0% 位置的 rgba(92,158,82,0.76)。 第二个是 97% 位置的 rgba(0,10,4,0.76)。

• 颜色 1：rgba(92,158,82,0.76)（在 0% 位置）
• 颜色 2：rgba(0,10,4,0.76)（在 97% 位置）

接下来，将渐变类型更改为线性并将方向设置为 131 度。 有它不重复。 将单位设置为百分比。 将渐变放在背景图像上方。

• 渐变类型：线性
• 方向：131度
• 重复：否
• 单位：百分比
• 在背景图像上方放置渐变：是

第二个线性梯度示例

这是第二个线性渐变示例。 它像第一个一样工作，但它在左边有一个硬停止，一个较暗的阴影接管。

要创建这个，添加三个渐变色标。 第一个是 rgba(18,76,41,0.76) 在 13% 的位置。 第二个是 rgba(92,158,82,0.76) 在 13% 的位置。 颜色 3在 34% 的位置是 rgba(18,76,41,0.76)。

• 颜色1：rgba(18,76,41,0.76)（在13%位置）
• 颜色 2：rgba(92,158,82,0.76)（在 13% 位置）
• 颜色 3：rgba(18,76,41,0.76)（在 34% 位置）

接下来，将渐变类型设置为线性并将方向设置为 90 度。 有它不重复。 将单位更改为百分比。 将其放在背景图像上方。

• 渐变类型：线性
• 方向：90度
• 重复：否
• 单位：百分比
• 在背景图像上方放置渐变：是

第三个线性梯度示例

我们的第三个示例在右上角对角放置了一条浅色线，与一条较暗的颜色线相接触。

这个有三种颜色。 颜色 1在 13% 的位置是 rgba(92,158,82,0.76)。 颜色 2在 23% 的位置是 rgba(92,158,82,0.76)。 第三个颜色是 rgba(18,76,41,0.76) 在 32% 的位置。

• 颜色1：rgba(92,158,82,0.76)（在13%位置）
• 颜色 2：rgba(92,158,82,0.76)（在 23% 位置）
• 颜色 3：rgba(18,76,41,0.76)（在 32% 位置）

将渐变类型设置为线性，方向为 209 度。 不要重复并将单位设置为百分比。 将渐变放在背景图像上方。

• 渐变类型：线性
• 方向：209度
• 重复：否
• 单位：百分比
• 在背景图像上方放置渐变：是

圆形渐变型

圆形渐变类型使用颜色创建一个圆形。

第一个圆形渐变示例

我们的第一个圆形渐变示例在中心放置了浅色，在边缘放置了深色。

这个有2种颜色。 第一个是 0% 位置的 rgba(92,158,82,0.76)。 第二个是 62% 位置的 rgba(0,10,4,0.76)。

• 颜色 1：rgba(92,158,82,0.76)（在 0% 位置）
• 颜色 2：rgba(0,10,4,0.76)（在 62% 位置）

将渐变类型设置为圆形。 中心方向。 不要重复，将单位更改为百分比，并将其放在背景图像上方。

• 渐变类型：圆形
• 方向：中心
• 重复：否
• 单位：百分比
• 在背景图像上方放置渐变：是

第二个圆形渐变示例

此渐变在屏幕中央放置一个清晰的圆形边缘。

它有四种颜色。 两种颜色叠加。 第一个是 rgba(18,76,41,0.76) 在 13% 的位置。 第二个是 rgba(92,158,82,0.76) 在 33% 的位置。 颜色 3在 51% 的位置是 rgba(92,158,82,0.76)。 颜色 4是 rgba(18,76,41,0.76)。 它位于颜色 3 上方的 51% 位置。

• 颜色1：rgba(18,76,41,0.76)（在13%位置）
• 颜色 2：rgba(92,158,82,0.76)（在 33% 位置）
• 颜色 3：rgba(92,158,82,0.76)（在 51% 位置）
• 颜色 4：rgba(18,76,41,0.76)（在 51% 位置）

将渐变类型设置为圆形，并将方向放在左上角。 不要重复，将单位更改为百分比，并将其放在背景图像上方。

• 渐变类型：圆形
• 方向：左上
• 重复：否
• 单位：百分比
• 在背景图像上方放置渐变：是

第三个圆形渐变示例

这个例子在较暗的颜色中放置了几个浅色圆圈，从圆圈的中间开始。

这个也是按照一定的顺序堆叠两种颜色来得到这个设计的。 第一种颜色是 13% 位置的 rgba(18,76,41,0.76)。 颜色 2在 44% 的位置是 rgba(18,76,41,0.76)。 第三种颜色叠加在第二种颜色之上。 在 44% 的位置是 rgba(92,158,82,0.76)。 颜色 4在 51% 的位置是 rgba(92,158,82,0.76)。

• 颜色1：rgba(18,76,41,0.76)（在13%位置）
• 颜色 2：rgba(18,76,41,0.76)（在 44% 位置）
• 颜色 3：rgba(92,158,82,0.76)（在 44% 位置）
• 颜色 4：rgba(92,158,82,0.76)（在 51% 位置）

将渐变类型更改为圆形。 将方向放在底部。 有这个重复。 将单位设置为百分比并将渐变放在背景图像上方。

• 渐变类型：圆形
• 方向：底部
• 重复：是
• 单位：百分比
• 在背景图像上方放置渐变：是

椭圆渐变型

椭圆渐变将颜色置于椭圆形状中。

第一个椭圆梯度示例

我们的第一个椭圆示例在屏幕中央放置一个颜色较浅的椭圆，其周围颜色较深。

这个有两种颜色。 第一个是 0% 位置的 rgba(92,158,82,0.76)。 第二个是 50% 位置的 rgba(0,10,4,0.76)。

• 颜色 1：rgba(92,158,82,0.76)（在 0% 位置）
• 颜色 2：rgba(0,10,4,0.76)（在 50% 位置）

将渐变类型更改为椭圆。 将方向设置为中心。 让这个不要重复，将单位设置为百分比，并将其放在背景图像上方。

• 渐变类型：椭圆
• 方向：中心
• 重复：否
• 单位：百分比
• 在背景图像上方放置渐变：是

第二个椭圆梯度示例

我们的第二个示例在整个渐变中放置了许多精细的圆形线条。

它有两种颜色。 第一个是 34pt 位置的 rgba(92,158,82,0.76)。 第二个是 39pt 位置的 rgba(0,10,4,0.76)。

• 颜色 1：rgba(92,158,82,0.76)（在 34pt 位置）
• 颜色 2：rgba(0,10,4,0.76)（在 39pt 位置）

将渐变类型更改为椭圆并将方向设置为左。 有这个重复。 将单位更改为点。 将其放在背景图像上方。

• 渐变类型：椭圆
• 方向：左
• 重复：是
• 单位：点
• 在背景图像上方放置渐变：是

第三个椭圆梯度示例

我们的第三个示例在渐变中放置了许多半圆。

这个有两种颜色。 第一个是 34vmin 位置的 rgba(32,68,35,0.73)。 第二个是 39vmin 位置的 rgba(0,10,4,0.76)。

• 颜色 1：rgba(32,68,35,0.73)（在 34vmin 位置）
• 颜色 2：rgba(0,10,4,0.76)（在 39vmin 位置）

将渐变类型更改为椭圆并将方向设置为顶部。 有这个重复。 将单位更改为视口最小值。 将其放在背景图像上方。

• 渐变类型：椭圆
• 方向：顶部
• 重复：是
• 单位：视口最小值
• 在背景图像上方放置渐变：是

锥形渐变型

圆锥渐变类型以圆锥形状显示渐变，就好像从上面看到的圆锥一样。

第一个锥形梯度示例

此示例从渐变中心向左放置一条对角线，一侧为浅色，另一侧为深色。

它有两种颜色。 第一个是 0% 位置的 rgba(92,158,82,0.76)。 第二个是 50% 位置的 rgba(0,10,4,0.76)。

• 颜色 1：rgba(92,158,82,0.76)（在 0% 位置）
• 颜色 2：rgba(0,10,4,0.76)（在 50% 位置）

将渐变类型更改为锥形。 将方向设置为 221 度。 将位置居中并使其不再重复。 将渐变放在图像上方。

• 渐变类型：锥形
• 方向：221度
• 位置：中心
• 重复：否
• 在背景图像上方放置渐变：是

第二个锥形梯度示例

此示例与上一个示例类似，但它将线从中心向上放置。

这个有四种颜色。 第一个是 rgba(20,40,20,0.76) 在 7% 的位置。 颜色 2在 24% 的位置是 rgba(30,73,25,0.68)。 颜色 3在 65% 的位置是 rgba(103,132,30,0.68)。 第四种颜色是 85% 位置的 rgba(38,86,26,0.68)。

• 颜色 1：rgba(20,40,20,0.76)（在 7% 位置）
• 颜色 2：rgba(30,73,25,0.68)（在 24% 位置）
• 颜色 3：rgba(103,132,30,0.68)（在 65% 位置）
• 颜色 4：rgba(38,86,26,0.68)（在 85% 位置）

将渐变类型设置为圆锥形，方向设置为 0 度。 居中位置。 不要重复并将其放在图像上方。

• 渐变类型：锥形
• 方向：0度
• 位置：中心
• 重复：否
• 在背景图像上方放置渐变：是

第三个锥形梯度示例

我们的最后一个示例从渐变的顶部中心向各个方向向外放置一系列线条。

这个有两种颜色。 第一个是 5° 位置的 rgba(30,73,25,0.68)。 第二个是 7deg 位置的 rgba(20,40,20,0.76)。

• 颜色1：rgba(30,73,25,0.68)（在5度位置）
• 颜色 2：rgba(20,40,20,0.76)（在 7 度位置）

将 eth Gradient Type设置为 Conical，将Direction设置为 221deg。 将位置放在顶部。 重复这个并将其放在背景图像上方。

• 渐变类型：锥形
• 方向：221度
• 位置：顶部
• 重复：是
• 在背景图像上方放置渐变：是

结束的想法

这就是我们比较 Divi 的 Gradient Builder 中的渐变类型的看法。 正如您在这些示例中看到的，设置很简单，但其中任何一个都可以对渐变设计产生重大影响。 为获得最佳效果，请尝试具有不同方向和位置的渐变类型，并启用或禁用重复选项以查看您可以创建的内容。

我们希望收到你的来信。 您是否在 Divi Gradient Builder 中使用过不同的渐变类型？ 请在评论中告诉我们您的体验。