🔥 会员专享文生文开发

CSS线性渐变生成器

👁️ 79 次查看

📅 Dec 4, 2025

💡 核心价值： 本提示词专为网页开发者设计，能够根据指定的起始颜色、结束颜色、渐变方向和渐变类型，生成精确的CSS线性渐变代码。支持多种渐变效果配置，包括渐变角度、色标位置调整等高级功能，确保生成的代码符合现代网页标准且具备良好的浏览器兼容性。适用于各种网页背景、按钮样式、界面元素的美化需求，帮助开发者快速实现专业的视觉效果。

终身会员免费复制

🎯 可自定义参数（4个）

起始颜色

渐变起始颜色值

结束颜色

渐变结束颜色值

渐变方向

渐变方向设置

渐变类型

渐变类型选择

🎨 效果示例

渐变效果预览：从左上角到右下角的线性蓝色渐变，起始为较深的蓝色逐步过渡到较浅的蓝色，视觉柔和、现代
CSS代码：

/* 线性渐变：to bottom right（等同于 135deg） */
.gradient-bg {
  /* 实色回退（不支持渐变的极少数环境） */
  background-color: hsl(217, 83%, 49%);

  /* 旧版 WebKit 前缀（提升部分旧移动端/旧Safari兼容性） */
  background-image: -webkit-linear-gradient(
    to bottom right,
    hsl(217, 83%, 49%),
    hsl(217, 89%, 76%)
  );

  /* 标准语法 */
  background-image: linear-gradient(
    to bottom right,
    hsl(217, 83%, 49%),
    hsl(217, 89%, 76%)
  );
}

使用说明：
- 将 .gradient-bg 应用于需要背景渐变的容器（如 body、卡片、按钮等），示例：
```
<div class="gradient-bg" style="min-height: 100vh;"></div>
```
- 渐变方向 to bottom right 表示从左上到右下的对角线过渡；若需调整角度，可将方向替换为角度值（例如 135deg）。
- 建议在需要叠加文字时留意对比度，必要时为文本添加阴影或在上层叠加半透明遮罩以保证可读性。
兼容性提示：
- 标准语法 linear-gradient 在现代浏览器均原生支持：Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+、iOS Safari 7+、Android 4.4+、IE 10+。
- 代码中包含 -webkit- 前缀，以增强部分旧版 WebKit 内核浏览器的兼容性。对于更早期（非常老旧）的 Safari/Android 浏览器，若仍需适配，建议同时进行浏览器升级或提供纯色回退方案。

渐变效果预览：从左向右，由温暖的橙色(#ff7a59)平滑过渡到浅杏色(#ffbc99)的线性渐变，层次柔和、现代感强。
CSS代码：

/* 可复用的线性渐变背景（左→右） */
.gradient-linear-right {
  /* 基础回退色（不支持渐变的老旧浏览器） */
  background-color: #ff7a59;

  /* 旧版 WebKit（Safari 5.1–6、Android 4.0–4.3） */
  background-image: -webkit-linear-gradient(left, #ff7a59 0%, #ffbc99 100%);

  /* 标准语法（现代浏览器） */
  background-image: linear-gradient(to right, #ff7a59 0%, #ffbc99 100%);
}

使用说明：
- 将类名 gradient-linear-right 添加到需要应用渐变的元素上，例如容器、按钮、标题栏等。
- 声明顺序已按兼容性从旧到新排列：最后的标准语法会在现代浏览器中生效；不支持标准语法但支持旧 WebKit 的浏览器会使用 -webkit- 版本；更老的浏览器则退回到纯色 background-color。
- 渐变是矢量渲染，不会失真，适用于响应式布局。若在渐变上叠加文字，请确保文字与背景的对比度充足以保证可读性。
兼容性提示：
- Chrome 26+、Firefox 16+、Edge 12+、Safari 6.1+、iOS Safari 7+、Android 4.4+：原生支持标准语法。
- Safari 5.1–6、Android 4.0–4.3：使用 -webkit-linear-gradient 前缀可正常显示。
- IE 10+：支持标准语法；IE 9 仅显示回退的纯色背景。

渐变效果预览
垂直方向（to bottom）的重复线性渐变，从纯白 rgb(255,255,255) 过渡到浅灰 rgb(242,242,242)，以柔和的条纹节奏重复，整体观感轻盈、不刺眼，适合作为页面背景、卡片或标题栏的细腻纹理。

CSS代码

/* 示例：应用于需要渐变背景的容器 */
.gradient-bg {
  /* 1) 最基础回退色：在不支持任何渐变的浏览器中显示纯白 */
  background-color: #ffffff;

  /* 2) 回退线性渐变：在不支持 repeating 的浏览器（如 IE）显示单次线性渐变 */
  background-image: linear-gradient(
    to bottom,
    rgb(255, 255, 255),
    rgb(242, 242, 242)
  );

  /* 3) 旧版 WebKit 前缀（如老版 Safari/Android WebKit） */
  background-image: -webkit-repeating-linear-gradient(
    to bottom,
    rgb(255, 255, 255) 0px,
    rgb(242, 242, 242) 12px,
    rgb(255, 255, 255) 24px
  );

  /* 4) 标准语法：repeating-linear-gradient */
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(255, 255, 255) 0px,
    rgb(242, 242, 242) 12px,
    rgb(255, 255, 255) 24px
  );
}

使用说明

直接将 .gradient-bg 类应用在需要渐变背景的元素上，如页面主体、卡片或标题栏。
条纹节距由色标位置控制：上述示例中从 0px→12px→24px 完成一个“白→灰→白”的循环，整体周期为 24px。
- 增大数值（如 20px/40px）= 条纹更宽、更柔和
- 减小数值（如 8px/16px）= 条纹更密集
色彩已使用有效的 CSS rgb() 格式，方向为 to bottom（从上到下），符合标准语法。
如用作整页背景，建议作用于 body 或主容器；可结合背景叠加色或内容留白，避免与文字对比不足。

兼容性提示

标准的 repeating-linear-gradient：现代主流浏览器（Chrome、Firefox、Safari、Edge 的近年版本）均良好支持。
旧版 WebKit 浏览器：提供了 -webkit- 前缀以提升兼容性。
Internet Explorer（IE 10/11）：不支持 repeating-linear-gradient，将回退到非重复的 linear-gradient 显示。
为确保最广泛兼容，代码已按“纯色 → 非重复渐变 → 前缀重复渐变 → 标准重复渐变”的顺序提供多级回退。