渐变配色表_渐变色在线生成调试_CSS渐变背景色在线预览复制-菜刀客

⛭ 渐变参数

起始颜色

HEX

结束颜色

HEX

渐变方向 / 类型

色彩组合快速切换

点击色名自动填入起止色并生成

设置起始色、结束色与方向后点击生成

🖼️ 渐变预览与 CSS 代码

🌈

设置渐变色与方向后，点击「生成渐变」查看预览

🎚 颜色占比 / 色标位置拖动滑块调整各色占比，可添加多种颜色

等待生成...

📚 经典渐变配色表（点击卡片复制 CSS）

海洋蓝#2193b0 → #6dd5ed

紫霞#7f00ff → #e100ff

日落#f83600 → #f9d423

蜜桃#ff9966 → #ff5e62

薄荷#43cea2 → #185a9d

樱花粉#f093fb → #f5576c

极光绿#00b09b → #96c93d

深空紫#41295a → #2f0743

炽焰#f12711 → #f5af19

晴空蓝#2980b9 → #6dd5fa

玫瑰红#eb3349 → #f45c43

湖水#00c6ff → #0072ff

森林#134e5e → #71b280

粉红泡泡#ff9a9e → #fecfef

深海#0f2027 → #2c5364

柠檬黄#fceabb → #f8b500

翡翠#11998e → #38ef7d

勃艮第#870000 → #190a05

薰衣草#a18cd1 → #fbc2eb

冰蓝#e0eafc → #cfdef3

#ee9ca7

#ffdde1

#2193b0

#6dd5ed

#c6ffdd

#fbd786

#f7797d

#00b09b

#96c93d

#12c2e9

#c471ed

#f64f59

#b92b27

#1565c0

#373b44

#4286f4

#2980b9

#6dd5fa

#ffffff

#ff0099

#493240

#aa4b6b

#6b6b83

#3b8d99

#8e2de2

#4a00e0

#1f4037

#99f2c8

#f953c6

#b91d73

#7f7fd5

#86a8e7

#91eae4

#c31432

#240b36

#f12711

#f5af19

#659999

#f4791f

#dd3e54

#6be585

#8360c3

#2ebf91

#544a7d

#ffd452

#009fff

#ec2f4b

#654ea3

#eaafc8

#ff416c

#ff4b2b

#8a2387

#e94057

#f27121

#a8ff78

#78ffd6

#1e9600

#fff200

#ff0000

#ed213a

#93291e

#fdc830

#f37335

#00b4db

#0083b0

#ffefba

#ffffff

#59c173

#a17fe0

#5d26c1

#005aa7

#fffde4

#da4453

#89216b

#636363

#a2ab58

#ad5389

#3c1053

#a8c0ff

#3f2b96

#333333

#dd1818

#4e54c8

#8f94fb

#355c7d

#6c5b7b

#c06c84

#bc4e9c

#f80759

#40e0d0

#ff8c00

#ff0080

#3e5151

#decba4

#11998e

#38ef7d

#108dc7

#ef8e38

#fc5c7d

#6a82fb

#fc466b

#3f5efb

#c94b4b

#4b134f

#23074d

#cc5333

#fffbd5

#b20a2c

#0f0c29

#302b63

#24243e

#d3cce3

#e9e4f0

#3c3b3f

#605c3c

#cac531

#f3f9a7

#800080

#ffc0cb

#00f260

#0575e6

#fc4a1a

#f7b733

#74ebd5

#acb6e5

#6d6027

#d3cbb8

#03001e

#7303c0

#ec38bc

#fdeff9

#667db6

#0082c8

#667db6

#ada996

#f2f2f2

#dbdbdb

#eaeaea

#e1eec3

#f05053

#1a2a6c

#b21f1f

#fdbb2d

#22c1c3

#fdbb2d

#ff9966

#ff5e62

#7f00ff

#e100ff

#c9d6ff

#e2e2e2

#396afc

#2948ff

#d9a7c7

#fffcdc

#0cebeb

#20e3b2

#29ffc6

#06beb6

#48b1bf

#642b73

#c6426e

#1c92d2

#f2fcfe

#000000

#0f9b0f

#36d1dc

#5b86e5

#cb356b

#bd3f32

#3a1c71

#d76d77

#ffaf7b

#283c86

#45a247

#ef3b36

#ffffff

#c0392b

#8e44ad

#159957

#155799

#000046

#1cb5e0

#007991

#78ffd6

#56ccf2

#2f80ed

#f2994a

#f2c94c

#eb5757

#000000

#e44d26

#f16529

#4ac29a

#bdfff3

#b2fefa

#0ed2f7

#30e8bf

#ff8235

#d66d75

#e29587

#20002c

#cbb4d4

#c33764

#1d2671

#f7971e

#ffd200

#34e89e

#0f3443

#6190e8

#a7bfe8

#44a08d

#093637

#200122

#6f0000

#0575e6

#021b79

#4568dc

#b06ab3

#43c6ac

#191654

#093028

#237a57

#43c6ac

#f8ffae

#ffafbd

#ffc3a0

#f0f2f0

#000c40

#e8cbc0

#636fa4

#dce35b

#45b649

#c0c0aa

#1cefff

#9cecfb

#65c7f7

#0052d4

#dbe6f6

#c5796d

#3494e6

#ec6ead

#67b26f

#4ca2cd

#f3904f

#3b4371

#ee0979

#ff6a00

#a770ef

#cf8bf3

#fdb99b

#41295a

#2f0743

#f4c4f3

#fc67fa

#00c3ff

#ffff1c

#ff7e5f

#feb47b

#fffc00

#ffffff

#ff00cc

#333399

#de6161

#2657eb

#ef32d9

#89fffd

#3a6186

#89253e

#4ecdc4

#556270

#a1ffce

#faffd1

#be93c5

#7bc6cc

#bdc3c7

#2c3e50

#ffd89b

#19547b

#808080

#3fada8

#fceabb

#f8b500

#f85032

#e73827

#f79d00

#64f38c

#cb2d3e

#ef473a

#56ab2f

#a8e063

#000428

#004e92

#42275a

#734b6d

#141e30

#243b55

#f00000

#dc281e

#2c3e50

#fd746c

#2c3e50

#4ca1af

#e96443

#904e95

#0b486b

#f56217

#3a7bd5

#3a6073

#00d2ff

#928dab

#2196f3

#f44336

#ff5f6d

#ffc371

#ff4b1f

#ff9068

#16bffd

#cb3066

#eecda3

#ef629f

#1d4350

#a43931

#a80077

#66ff00

#f7ff00

#db36a4

#ff4b1f

#1fddff

#ba5370

#f4e2d8

#e0eafc

#cfdef3

#4ca1af

#c4e0e5

#000000

#434343

#4b79a1

#283e51

#834d9b

#d04ed6

#0099f7

#f11712

#2980b9

#2c3e50

#5a3f37

#2c7744

#4da0b0

#d39d38

#5614b0

#dbd65c

#2f7336

#aa3a38

#1e3c72

#2a5298

#114357

#f29492

#fd746c

#ff9068

#eacda3

#d6ae7b

#6a3093

#a044ff

#457fca

#5691c8

#b24592

#f15f79

#c02425

#f0cb35

#403a3e

#be5869

#c2e59c

#64b3f4

#ffb75e

#ed8f03

#8e0e00

#1f1c18

#76b852

#8dc26f

#673ab7

#512da8

#00c9ff

#92fe9d

#f46b45

#eea849

#005c97

#363795

#e53935

#e35d5b

#fc00ff

#00dbde

#2c3e50

#3498db

#ccccb2

#757519

#304352

#d7d2cc

#ee9ca7

#ffdde1

#ba8b02

#181818

#525252

#3d72b4

#004ff9

#fff94c

#6a9113

#141517

#f1f2b5

#135058

#d1913c

#ffd194

#7b4397

#dc2430

#8e9eab

#eef2f3

#136a8a

#267871

#00bf8f

#001510

#ff0084

#33001b

#833ab4

#fd1d1d

#fcb045

#feac5e

#c779d0

#4bc0c8

#6441a5

#2a0845

#ffb347

#ffcc33

#43cea2

#185a9d

#ffa17f

#00223e

#360033

#0b8793

#948e99

#2e1437

#1e130c

#9a8478

#d38312

#a83279

#73c8a9

#373b44

#abbaab

#ffffff

#fdfc47

#24fe41

#83a4d4

#b6fbff

#485563

#29323c

#52c234

#061700

#fe8c00

#f83600

#00c6ff

#0072ff

#70e1f5

#ffd194

#556270

#ff6b6b

#9d50bb

#6e48aa

#780206

#061161

#b3ffab

#12fff7

#aaffa9

#11ffbd

#000000

#e74c3c

#f0c27b

#4b1248

#ff4e50

#f9d423

#add100

#7b920a

#fbd3e9

#bb377d

#606c88

#3f4c6b

#c9ffbf

#ffafbd

#649173

#dbd5a4

#b993d6

#8ca6db

#870000

#190a05

#00d2ff

#3a7bd5

#d3959b

#bfe6ba

#dad299

#b0dab9

#f2709c

#ff9472

#e6dada

#274046

#5d4157

#a8caba

#ddd6f3

#faaca8

#616161

#9bc5c3

#50c9c3

#96deda

#215f00

#e4e4d9

#c21500

#ffc500

#efefbb

#d4d3dd

#ffeeee

#ddefbb

#666600

#999966

#de6262

#ffb88c

#e9d362

#333333

#d53369

#cbad6d

#a73737

#7a2828

#f857a6

#ff5858

#4b6cb7

#182848

#fc354c

#0abfbc

#414d0b

#727a17

#e43a15

#e65245

#c04848

#480048

#5f2c82

#49a09d

#ec6f66

#f3a183

#7474bf

#348ac7

#ece9e6

#ffffff

#dae2f8

#d6a4a4

#ed4264

#ffedbc

#dc2424

#4a569d

#24c6dc

#514a9d

#283048

#859398

#3d7eaa

#ffe47a

#1cd8d2

#93edc7

#232526

#414345

#757f9a

#d7dde8

#5c258d

#4389a2

#134e5e

#71b280

#2bc0e4

#eaecc6

#085078

#85d8ce

#4776e6

#8e54e9

#614385

#516395

#1f1c2c

#928dab

#16222a

#3a6073

#ff8008

#ffc837

#1d976c

#93f9b9

#eb3349

#f45c43

#dd5e89

#f7bb97

#4cb8c4

#3cd3ad

#1fa2ff

#12d8fa

#a6ffcb

#1d2b64

#f8cdda

#ff512f

#f09819

#1a2980

#26d0ce

#aa076b

#61045f

#ff512f

#dd2476

#f09819

#edde5d

#403b4a

#e7e9bb

#e55d87

#5fc3e4

#003973

#e5e5be

#cc95c0

#dbd4b4

#7aa1d2

#3ca55c

#b5ac49

#348f50

#56b4d3

#da22ff

#9733ee

#02aab0

#00cdac

#ede574

#e1f5c4

#d31027

#ea384d

#16a085

#f4d03f

#603813

#b29f94

#e52d27

#b31217

#ff6e7f

#bfe9ff

#77a1d3

#79cbca

#e684ae

#314755

#26a0da

#2b5876

#4e4376

#e65c00

#f9d423

#2193b0

#6dd5ed

#cc2b5e

#753a88

#ec008c

#fc6767

#1488cc

#2b32b2

#00467f

#a5cc82

#076585

#ffffff

#bbd2c5

#536976

#9796f0

#fbc7d4

#b79891

#94716b

#bbd2c5

#536976

#292e49

#536976

#292e49

#acb6e5

#86fde8

#ffe000

#799f0c

#00416a

#e4e5e6

#ffe259

#ffa751

#799f0c

#acbb78

#5433ff

#20bdff

#a5fecb

#0052d4

#4364f7

#6fb1fc

#334d50

#cbcaa5

#00416a

#799f0c

#ffe000

#f7f8f8

#acbb78

#ffe000

#799f0c

#00416a

#e4e5e6

什么是渐变色与渐变配色？

渐变色（Gradient）指颜色在画面上平滑过渡的效果，是网页与 UI 设计中营造层次感、氛围感的常用手段。CSS 提供的 linear-gradient（线性渐变）与 radial-gradient（径向渐变）可以通过一段代码为元素填充品牌色、背景或图标配色。本工具让您自由指定起始色、结束色与渐变方向，实时生成可直接使用的 CSS 渐变代码，并提供多组经典双色渐变配色方案供快速选用。

四种常见渐变类型

线性渐变（linear-gradient）：颜色沿直线方向过渡，可通过 to top / to bottom / to right / to left / to bottom right 等角度指定方向。
径向渐变（radial-gradient）：颜色从一个中心点向外扩散成圆形渐晕，适合按钮高光、光晕与球面质感。
多色渐变：在起止色之间插入更多颜色节点（color-stop），形成彩虹、晚霞等更丰富的过渡效果。
透明度渐变：配合 rgba() 从实色过渡到透明，用于遮罩、蒙层与透明背景设计。

使用说明与小贴士

在左侧选择起始色与结束色（支持拖拽取色或直接输入 #RGB / #RRGGBB 色值），指定渐变方向后点击「生成渐变」，右侧即可预览效果并读取可直接复制使用的 CSS 代码；点击「📚 经典渐变配色表」中的任意卡片，可一键复制该配色的 CSS 代码。所有计算均在浏览器本地完成，不会上传任何数据。

🌈 渐变配色表

什么是渐变色与渐变配色？

四种常见渐变类型

使用说明与小贴士