渐层色

CSS 除了可以使用“单一颜色”设定样式，也能使用“渐层色”函数来产生线性渐层、放射渐层或重复渐层等色彩效果，这篇教学会介绍“渐层色”相关的 CSS 函数，例如 linear-gradient()、radial-gradient()、conic-gradient() 等等，透过多种颜色位置的设定，让网页的色彩更丰富更多变化。

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

“渐层色”的 CSS 函数

下方列出“渐层色”类型的 CSS 函数 ( 支援度 All 表示主流浏览器都支援 )：

linear-gradient()

“linear-gradient()”是“线性渐层”CSS 函数，基本上具有两个必填的颜色参数，和三个选填参数。

下方范例执行后，会使用“基本”写法，将三个 div 套用红色到黄色的渐层背景色。

线上展示：https://codepen.io/oxxo/pen/GRarMGb

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;       
  }
  .a {
    /* 漸層從上往下 */
    background: linear-gradient(red, yellow);   
  }
  .b {
    /* 按照角度漸層，顏色等比例分配位置 */
    background: linear-gradient(0deg, red, yellow);  
  }
  .c {
    /* 按照角度漸層，顏色根據指定位置出現 */ 
    background: linear-gradient(0deg, red 0%, yellow 100%);  
  }
</style>

angel 参数除了可以使用 deg 单位设定角度，也可以使用下列八种“方向名称”代替指定的方位角度：

下方范例执行后，会使用方向名称的写法，将三个 div 套用红色到黄色的渐层背景色。

线上展示：https://codepen.io/oxxo/pen/XWwpeBz

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;       
  }
  .a {
    /* 漸層從下往上 */
    background: linear-gradient(to top, red, yellow);
  }
  .b {
    /* 漸層從右上往左下 */
    background: linear-gradient(to left bottom, red, yellow);
  }
  .c {
    /* 漸層從左下往右上 */
    background: linear-gradient(to right top, red 0%, yellow 100%);
  }
</style>

虽然 linear-gradient() 默认两种颜色，但可以按照自己的需求扩充颜色和位置参数，默认位置从 0% 开始 100% 结束，但如果从大于 0% 的位置开始或小于 100% 的位置结束，则会使用开始或结束的颜色，填满到 0% 或 100%。

下方会用多种颜色渐层，填满不同的 div，可以看到如果红色从 40% 的位置开始，则 0%～40% 的区域都会被填满红色，如果紫色从 60% 的位置结束，则 60%～100% 的区域都会被填满紫色，其他的颜色就从 40%～60% 之间平均分配。

线上展示：https://codepen.io/oxxo/pen/WNBRZYx

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;       
  }
  .a {
    background: linear-gradient(red, yellow, green, blue, purple);
  }
  .b {
    background: linear-gradient(red 50%, yellow, green, blue, purple);
  }
  .c {
    background: linear-gradient(45deg, red 40%, yellow, green, blue, purple 60%);
  }
</style>

如果设定“颜色位置重叠”，渐层的效果将会消失，直接呈现清楚的分色效果，若前后边界没有设定颜色，则会以最靠近该边界的颜色补满，下方的范例会清楚的呈现两种颜色与七种颜色，而不会出现颜色之间的渐层。

线上展示：https://codepen.io/oxxo/pen/xxNgXBJ

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    background: linear-gradient(90deg, red 50%,black 50%);
  }
  .b {
    background: linear-gradient(90deg,
      red 0%, red 15%,
      orange 15%, orange 30%,
      yellow 30%, yellow 45%,
      green 45%, green 60%,
      blue 60%, blue 75%,
      indigo 75%, indigo 90%,
      black 90%, black 100%);
  }
</style>

radial-gradient()

“radial-gradient()”是“放射状渐层”CSS 函数，具有下列必填和选填的参数：

下方范例执行后，会使用“基本”写法，将三个 div 套用红色到黄色的放射状渐层背景色。

线上展示：https://codepen.io/oxxo/pen/NWVdwGd

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 紅色到黑色放射漸層 */
    background: radial-gradient(red, black);
  }
  .b {
    /* 中心點在正上方，紅色到黑色放射漸層 */
    background: radial-gradient(at top, red, black);
  }
  .c {
    /* 中心點在正上方，碰到最近角落，圓形，紅色到黑色放射漸層 */
    background: radial-gradient(circle closest-corner at top , red, black);
  }
</style>

shape 参数可以设定“两种不同形状”的放射状渐层，下方列出参数的说明：

两者在正方形的中心点区域没有太大差异，但如果是类似下方范例长方形的区域或正方形边缘，就会看出不同的填满效果。

线上展示：https://codepen.io/oxxo/pen/vYwgWGY

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 長方形，橢圓填滿 */
    width: 250px;
    background: radial-gradient(ellipse, red, black);
  }
  .b {
    /* 長方形，圓形填滿 */
    width: 250px;
    background: radial-gradient(circle, red, black);
  }
  .c {
    /* 橢圓填滿，中心點在正上方 */
    background: radial-gradient(ellipse at top, red, black);
  }
  .d {
    /* 圓形填滿，中心點在正上方 */
    background: radial-gradient(circle at top, red, black);
  }
</style>

size 参数可以设定放射渐层的“填满的方式”，下方列出参数的说明：

下方范例呈现四种填满方式所产生的效果。

线上展示：https://codepen.io/oxxo/pen/jOoyaVG

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 200px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 最近邊 */
    background: radial-gradient(circle closest-side, red, black);
  }
  .b {
    /* 最遠邊 */
    background: radial-gradient(circle farthest-side, red, black);
  }
  .c {
    /* 最近角 */
    background: radial-gradient(circle closest-corner at top, red, black);
  }
  .d {
    /* 最遠角 */
    background: radial-gradient(circle farthest-corner at top, red, black);
  }
</style>\

position 参数除了使用方向名称设定放射渐层的“中心点位置”，也可以使用“左右百分比 上下百分比”的方式设定位置 ( 可设定 0%～100% 区间内的数值)，主要位置参考下表：

下方范例呈现不同中心点位置的放射状渐层效果。

线上展示：https://codepen.io/oxxo/pen/MWdJOpV

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 中間上方 */
    background: radial-gradient(at top, red, black);
  }
  .b {
    /* 中間下方 */
    background: radial-gradient(at bottom, red, black);
  }
  .c {
    /* 右上方 */
    background: radial-gradient(at top right, red, black);
  }
  .d {
    /* 使用百分比使其放在靠右下方的位置 */
    background: radial-gradient(at 60% 60%, red, black);
  }
</style>

虽然 radial-gradient() 默认两种颜色，但可以按照自己的需求扩充颜色和位置参数，默认位置从 0% 开始 100% 结束，但如果从大于 0% 的位置开始或小于 100% 的位置结束，则会使用开始或结束的颜色，填满到 0% 或 100%。如果设定的“颜色位置重叠”，渐层的效果将会消失，直接呈现清楚的分色效果，若前后边界没有设定颜色，则会以最靠近该边界的颜色补满。

下方会用多种颜色的放射状渐层，填满不同的 div，除了有前后从 40% 和 60% 开始的渐层，也有颜色位置重叠的渐层。

线上展示：https://codepen.io/oxxo/pen/NWVdwvg

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 使用自動分配位置 */
    background: radial-gradient(red, orange, yellow, green, blue, purple);
  }
  .b {
    /* 第一項和最後一項設定位置，其餘顏色使用自動分配位置 */
    background: radial-gradient(red 40%, orange, yellow, green, blue, purple 60%);
  }
  .c {
    /* 顏色位置重疊 */
    background: radial-gradient(red 50%, black 50%);
  }
  .d {
    /* 多色位置重疊 */
    background: radial-gradient(
      red 0%, red 15%,
      orange 15%, orange 30%,
      yellow 30%, yellow 45%, 
      green 45%, green 60%,
      blue 60%, blue 75%,
      purple 75%, purple 100%);
  }
</style>

运用放射状渐层的中心点以及颜色位置，甚至可以模拟一个立体圆球的渐层颜色。

线上展示：https://codepen.io/oxxo/pen/OJYWOzW

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 100px;
    height: 100px; 
    border-radius:50%;
    background:radial-gradient(
      circle at 35% 25%,
      #fff 0,#ccc 20%,
      #999 40%,#000 90%,
      #666 95%,#999 100%);
  }
</style>

conic-gradient()

“conic-gradient()”是“圆锥形渐层”CSS 函数，是 CSS Level 4 才出现的渐层函数，具有至少两个必填的“颜色”参数和选填的“角度”参数，角度使用“顺时针”的方式增加。

下方使用基本的 conic-gradient() 写法，将不同的 div 套用不同的渐层色，使用多种颜色甚至可以做出彩虹的圆锥形渐层。

线上展示：https://codepen.io/oxxo/pen/gOJgXjg

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 雙色圓錐漸層 */
    background: conic-gradient(yellow, blue);
  }
  .b {
    /* 雙色圓錐漸層 */
    background: conic-gradient(white, black);
  }
  .c {
    /* 彩虹圓錐漸層 */
    background: conic-gradient(red, orange, yellow, green, blue, purple, red);
  }
</style>

如果将颜色的“角度重叠”，就可以很轻松地做出“分色效果”，如果搭配数据产生指定角度，再将 div 设定为圆形，甚至可以做出类似“圆饼图”的效果 ( 圆心 position 写法与 radial-gradient 相同 )。

线上展示：https://codepen.io/oxxo/pen/MWdJOzP

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    background:conic-gradient(
      #500 0, #500 45deg,
      #f00 45deg, #f00 90deg,
      #f50 90deg, #f50 135deg,
      #ff0 135deg,#ff0 180deg,
      #0c0 180deg, #0c0 225deg,
      #09d 225deg, #09d 270deg,
      #00b 270deg, #00b 315deg,
      #909 315deg, #909 360deg
    );
  }
  .b{
    border-radius:50%;
    background:conic-gradient(
      #fc0 0, 
      #fc0 45deg,
      #59f 45deg
    );
  }
</style>

repeating-linear-gradient()

“repeating-linear-gradient()”是“线性重复渐层”CSS 函数，所有的设定值和 linear-gradient() 相同，只是重复渐层的颜色位置参数不会指定到 100%，剩下没有指定的区域，就会按照前方的百分比设定的规律，进行重复填满的动作，举例来说，下方 div 的重复颜色最多都只设定到 20% 或 30%，剩下来 70%～80% 的空间，就会按照重复的规律进行填满。

线上展示：https://codepen.io/oxxo/pen/LYoxeYG

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 橘色黑色重複漸層 */
    background: repeating-linear-gradient(orange 0%, black 20%);
  }
  .b {
    /* 左下往右上，橘色黑色重複漸層 */
    background: repeating-linear-gradient(45deg, orange 0%, black 20%);
  }
  .c {
    /* 下往上，橘色黑色重複漸層 */
    background: repeating-linear-gradient(to top, orange 0%, black 20%);
  }
  .d {
    /* 右上往左下，橘色白色黑色重複漸層 */
    background: repeating-linear-gradient(to left bottom, orange 0%, white 25%, black 50%);
  }
</style>

如果颜色的“位置重叠”，就能做出漂亮的“分色效果”，如果搭配“多重背景”的样式，甚至还能做出颜色交叠的格纹背景效果。

线上展示：https://codepen.io/oxxo/pen/OJYWzyz

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 橘色黑色位置重複，分色效果 */
    background: repeating-linear-gradient(
      orange 0%,  orange 10%,
      black 10%, black 20%);
  }
  .b {
    /* 橘色黑色位置重複，分色效果，45deg */
    background: repeating-linear-gradient(
      45deg,
      orange 0%,  orange 10%,
      black 10%, black 20%);
  }
  .c {
    /* 橘色黑色位置重複，分色效果，多重背景，transparent 表示全透明 */
    background: 
      repeating-linear-gradient(
      45deg,
      transparent 0%,  transparent 10%,
      black 10%, black 20%),
      repeating-linear-gradient(
      -45deg,
      orange 0%,  orange 10%,
      black 10%, black 20%)
  }
</style>

如果将 div 的高度缩小，甚至可以做出各种不同的“虚线”样式。

线上展示：https://codepen.io/oxxo/pen/wvbgpdx

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 300px;
    height: 5px;
    margin: 10px;
  }
  .a {
    background: repeating-linear-gradient(
      to right,
      white 0%,  white 2%,
      black 2%, black 3%);
  }
  .b {
    background: repeating-linear-gradient(
      to right,
      white 0%,  white 2%,
      black 2%, black 5%,
      white 5%, white 6%,
      black 6%, black 7%);
  }
  .c {
    background: repeating-linear-gradient(
      45deg,
      white 0%,  white 2%,
      black 2%, black 6%);
  }
</style>

repeating-radial-gradient()

“repeating-radial-gradient()”是“放射状重复渐层”CSS 函数，所有的设定值和 radial-gradient() 相同，只是重复渐层的颜色位置参数不会指定到 100%，剩下没有指定的区域，就会按照前方的百分比设定的规律，进行重复填满的动作å。

线上展示：https://codepen.io/oxxo/pen/XWwpVjr

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 橘色黑色重複放射漸層 */
    background: repeating-radial-gradient(orange 0%, black 20%);
  }
  .b {
    /* 中間正上方，橘色黑色重複放射漸層 */
    background: repeating-radial-gradient(at top, orange 0%, black 20%);
  }
  .c {
    /* 右下方，橘色黑色重複放射漸層 */
    background: repeating-radial-gradient(at 70% 70%, orange 0%, black 20%);
  }
  .d {
    /* 左下角，橘色白色黑色重複放射漸層 */
    background: repeating-radial-gradient(at left bottom, orange 0%, white 5%, black 10%);
  }
</style>

如果颜色的“位置重叠”，就能做出漂亮的“分色效果”，如果搭配“多重背景”的样式，甚至还能做出颜色交叠的格纹背景效果。

线上展示：https://codepen.io/oxxo/pen/KKLaZNJ

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 橘色黑色重複放射漸層，位置重疊 */
    background: repeating-radial-gradient(
      orange 0%, orange 10%,
      black 10%, black 20%);
  }
  .b {
    /* 橘色黑色重複放射漸層，位置重疊，多重背景，transparent 為透明色 */
    background: repeating-radial-gradient(
      circle at left bottom, 
      transparent 0%, transparent 5%,
      black 5%, black 8%),
      repeating-radial-gradient(
      circle at right top, 
      orange 0%, orange 5%,
      black 5%, black 8%);
  }
</style>

repeating-conic-gradient()

“repeating-conic-gradient()”是“圆锥形重复渐层”CSS 函数，所有的设定值和 conic-gradient() 相同，只是重复渐层的颜色位置参数不会指定到 100%，剩下没有指定的区域，就会按照前方的百分比设定的规律，进行重复填满的动作。

线上展示：https://codepen.io/oxxo/pen/ExzZobP

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
  }
  .a {
    background: repeating-conic-gradient(
        orange 0deg, black 20deg);
  }
  .b {
    background: repeating-conic-gradient(
      at top,  
      orange 0deg, black 20deg);
  }
  .c {
    background: repeating-conic-gradient(
      at 70% 70%,  
      orange 0deg, black 20deg);
  }
  .d {
    background: repeating-conic-gradient(
      orange 0deg, black 15deg, orange 30deg);
  }
</style>

如果颜色的“位置重叠”，就能做出漂亮的“分色效果”，而圆锥重复渐层的分色效果，更是可以做出各种有趣的“放射线”效果。

线上展示：https://codepen.io/oxxo/pen/LYoxeQW

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
  }
  .a {
    background: repeating-conic-gradient(
        red 0deg, red 20deg,
        white 20deg, white 40deg
    );
  }
  .b {
    background: repeating-conic-gradient(
        at bottom,
        red 0deg, red 10deg,
        white 10deg, white 20deg
    );
  }
</style>

小结

CSS 的“渐层色”函数相当好用，真的是“不用不知道，一用就爱上！”如果有渐层色的需求，不妨先使用渐层色函数来处理，也可以省去许多背景图片的空间和流量。

意见反馈