1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/* 线性渐变基础语法 */

/* 最简单的两色渐变 */
.simple-gradient {
  background: linear-gradient(red, blue);
  /* 从红色渐变到蓝色，默认方向是从上到下 */
}

/* 带方向的三色渐变 */
.directional-gradient {
  background: linear-gradient(to right, red, green, blue);
  /* 从左到右：红 → 绿 → 蓝 */
}

/* 颜色后面加百分比控制渐变位置 */
.positioned-gradient {
  background: linear-gradient(to right, red 0%, blue 100%);
  /* 红色从0%开始，蓝色到100%结束 */
}

1
2
3
4
5
6
7

<div class="simple-gradient" style="height: 200px;">
  从上到下的红蓝渐变
</div>

<div class="directional-gradient" style="height: 200px;">
  从左到右的红绿蓝渐变
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 在 oklab 空间插值：中间过渡更亮、更"干净" */
.oklab-gradient {
  background: linear-gradient(in oklab, red, green);
}

/* 在 hsl 空间插值，并且选择"长弧"路径
   → 红到蓝会经过绿（而不是经过紫），适合做彩虹 */
.hue-gradient {
  background: linear-gradient(in hsl longer hue, red, blue);
}

/* 极坐标空间还支持 shorter / longer / increasing / decreasing 四种色相路径 */
.hue-options {
  background: linear-gradient(in hsl increasing hue, red, blue);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* 角度与方向对照 */

/* 0deg = to top（向上）*/
.deg0 {
  background: linear-gradient(0deg, red, blue);
}

/* 90deg = to right（向右）*/
.deg90 {
  background: linear-gradient(90deg, red, blue);
}

/* 180deg = to bottom（向下）*/
.deg180 {
  background: linear-gradient(180deg, red, blue);
}

/* 270deg = to left（向左）*/
.deg270 {
  background: linear-gradient(270deg, red, blue);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/* 关键字方向写法 */

/* to top：从下到上 */
.to-top {
  background: linear-gradient(to top, red, blue);
}

/* to bottom：从上到下（默认）*/
.to-bottom {
  background: linear-gradient(to bottom, red, blue);
}

/* to left：从右到左 */
.to-left {
  background: linear-gradient(to left, red, blue);
}

/* to right：从左到右 */
.to-right {
  background: linear-gradient(to right, red, blue);
}

/* 对角线方向 */
.to-top-right {
  background: linear-gradient(to top right, red, blue);
}

.to-bottom-left {
  background: linear-gradient(to bottom left, red, blue);
}

/* 角度写法（更精确）*/
.degree45 {
  background: linear-gradient(45deg, red, blue);
}

.degree135 {
  background: linear-gradient(135deg, red, blue);
}

.degree225 {
  background: linear-gradient(225deg, red, blue);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/* 三色渐变 */
.three-colors {
  background: linear-gradient(to right, red, yellow, green);
  /* 红 → 黄 → 绿 */
}

/* 四色渐变 */
.four-colors {
  background: linear-gradient(to right, red, orange, yellow, green);
  /* 彩虹效果的基础 */
}

/* 六色渐变：完整的彩虹（红橙黄绿蓝紫）*/
.rainbow {
  background: linear-gradient(
    to right,
    red 0%,
    orange 20%,
    yellow 40%,
    green 60%,
    blue 80%,
    purple 100%
  );
}

/* 彩虹渐变（简化版）*/
.rainbow-simple {
  background: linear-gradient(
    to right,
    red 0%,
    orange 17%,
    yellow 33%,
    green 50%,
    blue 67%,
    indigo 84%,
    violet 100%
  );
}

1
2
3
4
5
6
7

<div class="rainbow" style="height: 100px;">
  彩虹渐变条
</div>

<div class="three-colors" style="height: 150px;">
  三色渐变
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

/* 自定义色停位置 */

/* 颜色停在指定位置（<颜色> <位置> 是一组，位置写百分数或长度都行）*/
.custom-stops {
  background: linear-gradient(
    to right,
    red 0%,
    blue 30%,       /* 30%位置变成蓝色 */
    green 70%,      /* 70%位置变成绿色 */
    yellow 100%
  );
}

/* 两组颜色共用同一个位置 = 硬边界（不是"渐变到绿色"，而是"红线蓝线直接切换"）*/
.hard-stops {
  background: linear-gradient(
    to right,
    red 0%,
    red 25%,        /* 0% ~ 25% 是纯红 */
    blue 25%,       /* 25% 处颜色瞬间跳到蓝 */
    blue 50%,       /* 25% ~ 50% 是纯蓝 */
    green 50%,      /* 50% 处再跳一次，变成纯绿 */
    green 100%
  );
}

/* 更省事的硬边界写法：同一个位置也可以写成"两步"形式的一部分 */
.hard-stops-short {
  background: linear-gradient(
    to right,
    red 25%,     /* 省略 0%，浏览器会自动把红延伸到 0% */
    blue 25% 50%,
    green 50%
  );
  /* 0%~25% 红、25%~50% 蓝、50%~100% 绿，共三条硬边色带 */
}

/* 颜色提示点（transition hint）：告诉浏览器"颜色在哪个位置过渡到一半" */
.color-hint {
  background: linear-gradient(
    to right,
    red,
    30%,      /* 单独一个百分比是"提示点"：红在 30% 处才过渡到一半 */
    blue
  );
  /* 提示点越靠近红色，红色占的比例越大；不加提示点时默认在两个色停的正中 */
}

/* 位置可以超出 0%~100%：虽然超出部分不直接显示，
   但会影响边界处的颜色（用来做"只看到渐变一小段"的效果）*/
.overflow-stops {
  background: linear-gradient(to right, red -50%, blue 150%);
  /* 相当于"截取"了整条渐变中间的一段，两端不会有纯色 */
}

/* 重复渐变图案 */
.repeating {
  background: repeating-linear-gradient(
    to right,
    red 0px,
    red 20px,
    blue 20px,
    blue 40px
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* ❌ 有风险：从红渐隐到"透明黑" */
.risky-fade {
  background: linear-gradient(in oklab, red, transparent);
}

/* ✅ 推荐：用同一个颜色、alpha 变 0（#RRGGBBAA 写法，末尾 00 表示 alpha = 0）*/
.safe-fade {
  background: linear-gradient(in oklab, #ff0000, #ff000000);
  /* 等价写法：linear-gradient(in oklab, rgb(255 0 0), rgb(255 0 0 / 0)) */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* 径向渐变基础 */

/* 圆形渐变（从中心向四周）*/
.radial-circle {
  background: radial-gradient(circle, red, blue);
  /* 从红色圆心渐变到蓝色边缘；半径默认是 farthest-corner */
}

/* 椭圆渐变（不写形状时的默认值）*/
.radial-ellipse {
  background: radial-gradient(ellipse, red, blue);
  /* 注意：写 radial-gradient(red, blue) 与写 ellipse 完全等价，
     默认就是"椭圆 + farthest-corner" */
}

/* 指定颜色位置 */
.radial-positioned {
  background: radial-gradient(
    circle at center,  /* 圆心在中心 */
    red 0%,
    blue 100%
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* 尺寸也可以直接写长度：圆形写一个值，椭圆写两个值 */
.fixed-radius {
  background: radial-gradient(circle 80px at center, red, blue);
}

.fixed-ellipse {
  background: radial-gradient(ellipse 120px 60px at 50% 50%, red, blue);
}

/* 椭圆尺寸：两个值分别是"横向半径、纵向半径"，百分比按宽/高计算 */
.percentage-size {
  background: radial-gradient(ellipse 30% 20% at center, red, blue);
}

/* ⚠️ 圆形半径写百分比要小心：
   CSS Images Level 3 只允许长度（circle 30% 会被判为无效值）；
   Level 4 新增"圆的百分比"，按缩放对角线 sqrt(w²+h²)/√2 计算，
   但浏览器支持并不统一。要稳妥，圆就用长度写 */
.circle-length {
  background: radial-gradient(circle 80px at center, red, blue);  /* ✅ 处处可用 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* 圆心位置 */

/* at center：圆心在正中间（默认）*/
.at-center {
  background: radial-gradient(circle at center, red, blue);
}

/* at top：圆心在顶部 */
.at-top {
  background: radial-gradient(circle at top, red, blue);
}

/* at bottom：圆心在底部 */
.at-bottom {
  background: radial-gradient(circle at bottom, red, blue);
}

/* at top left：圆心在左上角 */
.at-corner {
  background: radial-gradient(circle at top left, red, blue);
}

/* at 百分比位置：圆心在 30% 70% 位置 */
.at-percentage {
  background: radial-gradient(circle at 30% 70%, red, blue);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/* closest-side：渐变延伸至最近的边 */
.closest-side {
  background: radial-gradient(
    circle closest-side at center,
    red, blue
  );
  /* 渐变在碰到最近的边时停止 */
}

/* farthest-corner：渐变延伸至最远的角（默认）*/
.farthest-corner {
  background: radial-gradient(
    circle farthest-corner at center,
    red, blue
  );
  /* 渐变延伸至最远的角 */
}

/* closest-corner：渐变延伸至最近的角 */
.closest-corner {
  background: radial-gradient(
    circle closest-corner at center,
    red, blue
  );
}

/* farthest-side：渐变延伸至最远的边 */
.farthest-side {
  background: radial-gradient(
    circle farthest-side at center,
    red, blue
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* 圆锥渐变基础 */

/* 基本圆锥渐变 */
.conic-basic {
  background: conic-gradient(red, yellow, green, blue, red);
  /* 从红色开始，按角度旋转经过黄、绿、蓝，最后回到红色 */
}

/* 带起点的圆锥渐变 */
.conic-from {
  background: conic-gradient(from 0deg at center, red, blue);
  /* 0deg = 正上方（12 点方向），红色从这里开始，顺时针过渡到蓝色 */
}

/* 饼图效果。角度基准：0deg 在正上方，顺时针增大；
   90deg = 正右、180deg = 正下、270deg = 正左、360deg 回到顶部 */
.pie-chart {
  background: conic-gradient(
    red 0deg,        /* 红色从顶部（0°，即 0%）开始 */
    red 90deg,       /* 红色占到 90°（25%）：右上那一块 */
    yellow 90deg,    /* 从正右方 90° 开始换黄色 */
    yellow 180deg,   /* 黄色占到 180°（50%）：右下那一块 */
    green 180deg,    /* 从正下方 180° 开始换绿色 */
    green 270deg,    /* 绿色占到 270°（75%）：左下那一块 */
    blue 270deg,     /* 从正左方 270° 开始换蓝色 */
    blue 360deg      /* 蓝色结束于 360°（100%） */
  );
  border-radius: 50%;  /* 变成圆形就是饼图 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* 用 turn：1turn = 360°，0.25turn = 90° —— 写"四分之一块"最直观 */
.pie-easy {
  background: conic-gradient(
    #e74c3c 0turn 0.25turn,   /* 0% ~ 25% */
    #f1c40f 0.25turn 0.5turn, /* 25% ~ 50% */
    #2ecc71 0.5turn 0.75turn, /* 50% ~ 75% */
    #3498db 0.75turn 1turn    /* 75% ~ 100% */
  );
  border-radius: 50%;
}

/* 色停也可以直接写百分比（按整圈折算成角度）*/
.pie-percent {
  background: conic-gradient(red 0% 40%, blue 40% 100%);
  border-radius: 50%;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* 从不同角度开始的圆锥渐变 */

/* 从0度（正上方，12 点方向）开始 */
.from-0deg {
  background: conic-gradient(from 0deg at center, red, blue);
}

/* 从90度开始 —— 因为角度顺时针，90deg 落在"正右方" */
.from-90deg {
  background: conic-gradient(from 90deg at center, red, blue);
}

/* 从180度开始 —— 落在"正下方" */
.from-180deg {
  background: conic-gradient(from 180deg at center, red, blue);
}

/* 从270度开始 —— 落在"正左方" */
.from-270deg {
  background: conic-gradient(from 270deg at center, red, blue);
}

/* 常用写法：让第一块颜色正好从 12 点开始往上走，
   又想让"3 点钟方向"是分界线时，用 turn 更直观 */
.from-turn {
  background: conic-gradient(from 0.25turn at center, red, blue);
  /* = from 90deg，起点在正右方 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* 重复线性渐变 */

/* 条纹效果 */
.stripes {
  background: repeating-linear-gradient(
    45deg,              /* 45度角 */
    red 0px,             /* 红色从0px开始 */
    red 20px,            /* 红色到20px */
    blue 20px,           /* 蓝色从20px开始 */
    blue 40px            /* 蓝色到40px，完成一个循环 */
  );
  /* 重复：0-20px红，20-40px蓝，40-60px红... */
}

/* 斑马条纹 */
.zebra-stripes {
  background: repeating-linear-gradient(
    to bottom,
    #f5f5f5 0px,
    #f5f5f5 10px,
    #333 10px,
    #333 20px
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 重复径向渐变 */

/* 圆点图案 */
.polka-dot {
  background: repeating-radial-gradient(
    circle at 50% 50%,  /* 圆心在中心 */
    #3498db 0px,        /* 蓝色从0px开始 */
    #3498db 10px,       /* 蓝色到10px */
    transparent 10px,   /* 10px 处开始变透明（硬边界）*/
    transparent 20px    /* 到20px，完成一个循环 */
  );
  /* ⚠️ 这里用的是 transparent（透明黑）。现代浏览器按预乘 alpha 插值，
     不会出现"发灰"的过渡；但如果加上 in oklab 之类的插值空间，
     建议改成同色透明（#3498db00）更保险 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/* 重复圆锥渐变 */

/* 四象限方块：每 180° 重复一次，得到"对角两块同色"的方块 */
.checkerboard {
  background: repeating-conic-gradient(
    #eee 0deg 90deg,
    #ccc 90deg 180deg
  );
  /* 每 180° 重复一次，横向再配合 background-size 就能得到规整棋盘 */
  background-size: 80px 80px;
}

/* 经典的棋盘格做法：靠两个 0% 起点 + background-size 平铺 */
.checkerboard-45 {
  background: repeating-conic-gradient(
    #fff 0% 25%,
    #333 0% 50%
  );
  background-position: 50% 50%;   /* 平移半格，让黑白交错成棋盘 */
  background-size: 40px 40px;
  /* 第二个色停写的是 0% 50%，但"位置比前一个还小"会被自动修正为 25%，
     于是变成 #fff 0~25%、#333 25~50%，周期是 50%（180°）。
     这正是 CSS 里做棋盘格的经典技巧。 */
}

/* 轮盘/仪表盘的刻度线 */
.dial {
  background: repeating-conic-gradient(
    #333 0deg 2deg,       /* 每 2° 画一条刻度 */
    transparent 2deg 30deg /* 中间空 30°，也就是每 30° 一根刻度 */
  );
  border-radius: 50%;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* 现代渐变背景 */

/* 优雅的渐变背景 */
.elegant-gradient {
  background: linear-gradient(
    135deg,
    #667eea 0%,     /* 起始颜色 */
    #764ba2 100%    /* 结束颜色 */
  );
}

/* 柔和渐变 */
.soft-gradient {
  background: linear-gradient(
    120deg,
    #a8edea 0%,
    #fed6e3 100%
  );
}

/* 深色渐变 */
.dark-gradient {
  background: linear-gradient(
    to bottom,
    #2c3e50 0%,
    #4ca1af 100%
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* 条纹背景图案 */

/* 斜条纹 */
.diagonal-stripes {
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #e0e0e0 10px,
    #e0e0e0 20px
  );
}

/* 横条纹 */
.horizontal-stripes {
  background: repeating-linear-gradient(
    to bottom,
    #f0f0f0 0px,
    #f0f0f0 20px,
    #e0e0e0 20px,
    #e0e0e0 40px
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 渐变文字效果 */
.gradient-text {
  background: linear-gradient(to right, #667eea, #764ba2);
  -webkit-background-clip: text;  /* Safari/WebKit 必需 */
  background-clip: text;          /* 标准属性 */
  -webkit-text-fill-color: transparent;
  color: transparent;             /* 非 WebKit 引擎的兜底 */
  font-size: 48px;
  font-weight: bold;
  /* ⚠️ 顺序很重要：background 是缩写，会把 background-clip 重置为 border-box，
     所以 background-clip: text 必须写在 background 之后 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/* 1. 叠加多层渐变：用 background-image 逗号分隔，前面的盖住后面的 */
.layered {
  background-image:
    linear-gradient(to right, rgba(52, 152, 219, 0.8), transparent),  /* 左侧蓝色渐隐 */
    repeating-linear-gradient(45deg, #fff 0 10px, #f6f6f6 10px 20px), /* 斜条纹底 */
    radial-gradient(circle, #fff 0%, #ddd 100%);
  /* 注意：可以用逗号写多条，但最上面那张图会遮住下面的 */
}

/* 2. 用渐变当"分隔线"（不用额外元素）*/
.divider {
  height: 2px;
  background: linear-gradient(to right, transparent, #999, transparent);
  /* 两端渐隐的分隔线 */
}

/* 3. 用 conic-gradient 做进度环 */
.progress-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#3498db 0 65%, #e0e0e0 65% 100%);
  /* 65% 处硬边界 → 看起来就是一个 65% 的进度环。
     想要"中间挖空"的环形，再叠一层 radial-gradient 或加 mask */
}

/* 4. 光晕/高光效果 */
.card-highlight {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.6), transparent 60%),
    linear-gradient(160deg, #4facfe, #00f2fe);
  /* 左上角一抹高光 + 蓝色渐变底，卡片立刻有"玻璃质感" */
}

/* 5. 骨架屏（loading 占位）的流光动画 */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;   /* 让渐变比元素宽 4 倍，才有"扫过"的空间 */
  animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}