Web、UI与CSS

渐变颜色位置不对？检查角度与色标

使用工具

想左右渐变却成斜向，改色码也不解决。应把颜色、方向、停止位置分开。当前界面可用两色与角度生成 CSS；下文位置修改是输出 CSS 的延伸阅读，不是声称界面已有的控件。

从左到右的双色输出

background: linear-gradient(90deg, #4F46E5 0%, #22D3EE 100%);

填 #4F46E5、#22D3EE、90 度，首色左、次色右；180 度则上到下。CSS 零度向上、顺时针增大，与数学常见横向零度不同，先用简单方向建立基准。

排查方向时别同时换角度与交换颜色。一次改一项，观察 CSS 是角度还是颜色顺序变化，才能理解效果并回退。

色码后的百分比指定渐变线位置，0% 不等于透明，100% 不等于不透明。透明度是颜色 alpha。应区分延长色块与改变浓淡或透明度。

在使用处修改位置的 CSS 示例

background: linear-gradient(90deg, #4F46E5 30%, #22D3EE 70%);

这是复制 CSS 后在使用处修改的例子。30% 前保持首色，30～70% 过渡，之后保持次色。当前双色界面无专门位置栏，不要把整条声明粘进颜色输入。

在 50% 切换颜色的 CSS

background: linear-gradient(90deg, #4F46E5 50%, #22D3EE 50%);

两个色标同为 50% 会消除过渡区形成硬切换。渐变不必总是模糊色带。若想分区却出现大片中间色，应在使用处检查停止位置。

同角度与色标在方形预览和宽横幅中分布观感不同。百分比是渐变线位置，不是简单标屏幕横宽。应在真实尺寸、圆角、间距下检查复制 CSS。

叠字时应检查实际文字下最难读的背景。对比工具只算给定色对，不自动扫描全渐变或文字位置。变化背景需在实际布局逐处检查。

先在 0%/100% 两色下定方向，再调颜色，必要时在使用处改停止点。一次改一维更清楚，最后用大小屏和真实文字检查，别只看空色块。

工具不获取背景 URL 或导入他站 CSS，只由输入颜色生成声明。多背景、动画、指定插值色空间等需另行处理，单条输出不等于背景设计全部完成。