背景与配色
CSS 渐变生成器
在线生成 linear-gradient 和 radial-gradient，支持角度、径向位置、双色或三色搭配，适合网页背景、活动页首屏、专题封面和内容卡片视觉区块。
实时生成
输入颜色值后可立即预览渐变效果，并直接复制 CSS 代码用于页面背景、按钮、横幅和品牌视觉模块。
实时预览
网页头图区块
当前渐变适合用于 Hero、专题封面、活动页 KV、内容卡片背景或模块分区。
- 渐变类型
- linear-gradient
- 渐变值
- linear-gradient(135deg, #FF7F50 0%, #F6BD60 50%, #1E88E5 100%)
- CSS 代码
- background: linear-gradient(135deg, #FF7F50 0%, #F6BD60 50%, #1E88E5 100%);
- 颜色序列
- #FF7F50 -> #F6BD60 -> #1E88E5
线性与径向区别
两类渐变都常用于网页背景，但适合的版式和视觉焦点并不相同。
- 线性渐变会沿一个方向平滑过渡，适合横幅、卡片、按钮和分区背景。
- 径向渐变会从某个中心点向外扩散，适合制造聚焦、光感或封面氛围。
- 如果页面文本较多，优先控制渐变层次，避免背景干扰正文阅读。
适合哪些场景
渐变背景常见于品牌官网、活动专题、产品宣传页和内容封面。
- 为 Hero 区、KV 区和专题封面生成更有层次的背景。
- 给按钮、标签、卡片标题区增加品牌感和识别度。
- 快速输出营销页、海报封面和社媒视觉图所需的 CSS 渐变代码。
预设方案参考
下面这些预设可以直接作为起点，再继续微调颜色与方向。
名称类型颜色数适用说明
日出暖橙线性3 色适合活动页首屏、品牌横幅和暖色氛围背景。
海岸蓝绿线性3 色适合 SaaS、数据可视化和偏科技感的页面。
森林雾气径向3 色适合自然主题、内容封面和博客头图。
日落霓光径向3 色适合营销活动、专题页视觉中心和海报背景。
深色品牌线性3 色适合暗色模块、产品主视觉和品牌专题封面。
使用建议
真正上线时，渐变不仅要好看，还要考虑文本层级、压缩体积和不同屏幕下的稳定性。
- 大面积背景尽量控制在 2 到 3 个颜色之间，避免颜色跳跃过多导致页面显乱。
- 如果渐变区域上方有标题或按钮，最好再做一层半透明遮罩，确保文字可读性。
- 正式页面中建议把高频使用的渐变沉淀成设计 token，方便组件和专题页复用。
相关工具
你还可以继续使用其他已经可用的颜色工具完成配色和校对。