渐变设置
135°
预览与代码
选择渐变类型
在线性、放射或锥形之间切换；放射类型可再选椭圆或圆形。
调整方向或角度
线性与锥形可用滑块旋转角度；放射类型会隐藏角度栏并改为用形状控制扩散方式。
编辑颜色与停止点
点击色块打开取色器，或输入六位 HEX；拖动位置滑块决定颜色在渐变上的位置。
预览、复制或重置
右侧会实时显示效果与完整 CSS。可套用预设渐变快速开始，或按重置回到默认两色。
生成的数值可贴到背景相关样式；若需要透明渐变，可在复制后把其中一色改成含透明度的写法。
这个工具适合哪些场景？
常见用途包括：为首屏区块、按钮或卡片添加渐变背景；在图片上叠一层由深到浅的遮罩让文字更易读；以及在定稿前快速尝试多组配色。
线性、放射与锥形有什么不同？
线性沿着一条直线混合颜色，适合横幅或斜向背景。放射从中心向外扩散，适合聚光或圆形按钮。锥形则绕着中心旋转分配颜色，视觉上像色环或饼图。
可以做一端透明的渐变吗？
可以。先按平常方式生成渐变，复制后把其中一个颜色改成带透明度的色彩，或使用浏览器支持的透明关键字，再贴回你的样式表即可。
各浏览器都能用生成的 CSS 吗？
线性与放射在当今主流浏览器均可正常使用。锥形在现行版本的主流浏览器也普遍支持；若仍需支持极旧环境，请先小范围实测再决定是否采用锥形。
颜色停止点一定要两个吗？
至少需要两个颜色才有渐变效果。若需要更细腻的过渡，可使用「新增停止点」加入第三、第四个颜色，位置百分比可自由调整。
预设渐变按钮会改动哪些设置？
按下预设会套用该组配色与角度，并将类型切回线性，方便在此基础上再微调；若只想还原默认两色与角度，可使用操作栏上的「重置」。
图片压缩
迷因图
社群营销
2026-05-17
线上图片压缩/编辑工具：一键制作高画质迷因与社群贴文视觉指南
想制作爆款迷因图与社群贴文，却受限于图片容量过大、尺寸不合与色彩黯淡？本文教你如何透过线上图片压缩与色彩转换工具，一键优化图片画质，打造吸睛的社群视觉体验。
影像处理
色彩空间
图片压缩
2026-06-24
数字影像视觉优化：从色彩空间到压缩算法的深度决策指南
深入探讨影像格式选择的底层逻辑，解析 SVG 与点阵图在不同应用场景下的性能与视觉损耗差异，助您做出专业的影像处理决策。
影像优化
网页性能
SVG
2026-06-14
视觉资产优化：SVG 与点阵图的场景抉择与性能指南
在追求网站加载速度与视觉体验的平衡时，选择正确的图片格式是关键。本文深入剖析 SVG 与传统点阵图的运作机制，并提供实战决策策略。
影像处理
格式优化
网页性能
2026-06-14
数字影像视觉优化：颜色空间、压缩算法与格式抉择实务
深入解析影像处理的核心机制，从颜色空间选择到向量与点阵格式的性能权衡，协助你在网页与设计工作流中做出最优化决策。
图像处理
图像格式
视觉优化
2026-06-09
图像格式选择逻辑：从色彩保真到网络传输的决策矩阵
深入解析图像格式的底层机制，探讨 SVG 矢量图与位图（PNG/JPG/WebP）在不同应用场景中的取舍策略与视觉优化指标。
影像处理
图片优化
颜色空间
2026-06-04
数字影像处理：颜色格式与压缩技术的最佳化策略
深入探讨数字影像的核心技术，从颜色空间选择到压缩算法的应用，协助您在画质与档案大小之间找到最佳平衡点。