CSS 渐变

仅在当前浏览器处理

文本上限:2000000 个字符

此工具不会上传你的输入。

背景要从品牌色过渡到深色。复制代码。中间停靠点以表单为准。能写 CSS 的站点继续写 CSS,不要栅格化成一张大图再压。

头图要从品牌蓝过渡到几乎黑——要 linear-gradient。本页出 CSS。活动页背景不要先做成一张 4K 图再压缩,能写 CSS 就写 CSS。

阴影走 CSS 阴影。色对走对比度。起步色走配色。从海报吸一个点走图片取色

背景渐变片段

  • 活动页、按钮 hover、进度条。不是品牌渐变规范。
  • 文字对比度请另测:同一行字跨过两种亮度。
  • 示例请围栏:
background: linear-gradient(180deg, #1d4ed8, #0f172a);
  • 印刷渐变网、专色叠印不在范围。屏幕 CSS 和印刷 RIP 不是一回事。

怎么用

  1. 选方向和色标。停靠点百分比以表单为准。
  2. 复制 CSS。径向、重复渐变看控件。
  3. 再检查叠在上面的字,尤其是浅色小字。

使用前先看清的限制

不是网格系统,不是印刷渐变网,也不是无障碍证书。旧内核可能不认较新函数。

常见问题

能导出设计稿吗?

不能。复制 CSS。不是 Figma 网格,也不是品牌渐变规范。

文字对比度?

渐变上的字要吸实际像素再查对比度。浅端过了、深端可能只有 2.5:1。

和阴影页?

阴影是 box-shadow。本页是 gradient。两段都可以贴进同一张卡片。

文档里怎么贴?

用代码围栏,避免 CMS 执行标记。

圆锥、网格渐变?

以表单列出的为准。旧浏览器对较新语法支持不一,上线前在真机看。

相关工具