最近访问(前10条)

CSS3背景与渐变在线学习工具

实时预览

预览文本

查看文字在渐变背景上的效果

尺寸: 600 × 400

颜色数: 2

属性控制

渐变类型

线性渐变属性

角度 (angle): 90deg 💡

快速方向:

渐变颜色

颜色 1

位置: 0%

颜色 2

位置: 100%

背景属性

background-size:

background-repeat:

background-attachment:

文本预览

显示文本

文本颜色:

生成的CSS代码

.gradient-background {
      background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: scroll;
    }

属性目录

📏 线性渐变 (Linear Gradient)

线性渐变沿着一条直线过渡颜色，通过angle参数控制方向。

语法格式

background: linear-gradient(angle, color-stop1, color-stop2, ...);

angle（角度）

0deg - 从下到上（↑）
90deg - 从左到右（→）
180deg - 从上到下（↓）
270deg - 从右到左（←）
45deg - 从左下到右上（↗）

方向关键字

to top - 等同于 0deg
to right - 等同于 90deg
to bottom - 等同于 180deg
to left - 等同于 270deg
to top right - 对角渐变

示例：

/* 从左到右，红到蓝 */
background: linear-gradient(90deg, #ff0000, #0000ff);

/* 45度角，三色渐变 */
background: linear-gradient(45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);

⭕ 径向渐变 (Radial Gradient)

径向渐变从一个中心点向外辐射颜色。

语法格式

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

shape（形状）

circle - 圆形（宽高比1:1）
ellipse - 椭圆形（默认，适应容器）

size（大小）

closest-side - 渐变到最近的边
closest-corner - 渐变到最近的角
farthest-side - 渐变到最远的边
farthest-corner - 渐变到最远的角（默认）

position（位置）

at center - 中心点（默认）
at top left - 左上角
at 50% 50% - 使用百分比定位
at 100px 100px - 使用像素定位

示例：

/* 圆形，从中心向外 */
background: radial-gradient(circle, #ff0000, #0000ff);

/* 椭圆，从左上角开始 */
background: radial-gradient(ellipse at top left, #ff0000, #0000ff);

/* 精确控制大小和位置 */
background: radial-gradient(circle farthest-corner at 30% 30%, #ff0000 0%, #0000ff 100%);

🌀 圆锥渐变 (Conic Gradient)

圆锥渐变围绕中心点旋转颜色，适合制作色环、饼图等。

语法格式

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

from angle（起始角度）

from 0deg - 从12点钟方向开始（默认）
from 90deg - 从3点钟方向开始
from 180deg - 从6点钟方向开始

at position（中心位置）

at center - 中心（默认）
at 50% 50% - 使用百分比
at 0% 0% - 左上角

示例：

/* 彩虹色环 */
background: conic-gradient(from 0deg, red, orange, yellow, green, blue, purple, red);

/* 指定位置的圆锥渐变 */
background: conic-gradient(from 45deg at 30% 30%, #ff0000, #0000ff);

/* 制作饼图效果 */
background: conic-gradient(#ff0000 0deg 120deg, #00ff00 120deg 240deg, #0000ff 240deg 360deg);

🎨 颜色停止点 (Color Stops)

颜色停止点定义渐变中每种颜色的位置。

位置单位

% - 百分比（0%-100%）
px - 像素值
em / rem - 相对单位

多停止点技巧

相邻位置相同可创造硬边界（无过渡）
停止点越多，渐变越丰富
位置可以重叠，创造特殊效果

示例：

/* 柔和过渡 */
background: linear-gradient(90deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);

/* 硬边界（条纹效果） */
background: linear-gradient(90deg, #ff0000 0%, #ff0000 33%, #00ff00 33%, #00ff00 66%, #0000ff 66%, #0000ff 100%);

/* 透明度渐变 */
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,0,0,0) 100%);

🖼️ 背景属性 (Background Properties)

background-size

auto - 默认大小
cover - 覆盖整个容器（可能裁剪）
contain - 完全显示（可能留白）
100% 100% - 拉伸填充
200px 100px - 指定宽高

background-repeat

no-repeat - 不重复
repeat - 水平垂直重复
repeat-x - 仅水平重复
repeat-y - 仅垂直重复
space - 均匀分布
round - 拉伸适应

background-attachment

scroll - 随内容滚动（默认）
fixed - 固定在视口（视差效果）
local - 随元素内容滚动

background-position

center - 居中
top left - 左上角
50% 50% - 百分比定位
10px 20px - 像素定位

💡 实用技巧与最佳实践

1. 多重渐变

/* 叠加多个渐变 */
background: 
    linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.3) 70%, transparent 70%),
    linear-gradient(90deg, #ff0000, #0000ff);

2. 渐变边框

/* 使用伪元素实现渐变边框 */
border: 2px solid transparent;
background: linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #ff0000, #0000ff) border-box;

3. 渐变文字

/* 文字渐变效果 */
background: linear-gradient(90deg, #ff0000, #0000ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

4. 性能优化

避免过多的颜色停止点（建议≤5个）
使用硬件加速：transform: translateZ(0)
提供fallback颜色：background: #ff0000;（渐变之前）
考虑浏览器兼容性，添加前缀

5. 可访问性

确保文字与背景对比度≥4.5:1（WCAG AA标准）
重要内容不要仅依赖颜色区分
测试在不同设备和屏幕上的显示效果

🌐 浏览器兼容性

特性	Chrome	Firefox	Safari	Edge
linear-gradient	✅ 26+	✅ 16+	✅ 7+	✅ 12+
radial-gradient	✅ 26+	✅ 16+	✅ 7+	✅ 12+
conic-gradient	✅ 69+	✅ 83+	✅ 12.1+	✅ 79+

添加浏览器前缀

/* 完整的浏览器兼容写法 */
background: #ff0000; /* fallback */
background: -webkit-linear-gradient(90deg, #ff0000, #0000ff);
background: -moz-linear-gradient(90deg, #ff0000, #0000ff);
background: linear-gradient(90deg, #ff0000, #0000ff);

💡 提示：本工具支持实时预览所有CSS3渐变属性，您可以通过调整参数直观地理解各属性的效果。建议边学边实践，加深理解！

喜欢(0)

不喜欢(0)

在线创意工具助手，释放您的创意潜能，打破创作的边界♡⃝

沪公网安备31011402006298号

请告诉我您想搜索的内容🔍✨

CSS3背景与渐变在线学习工具

实时预览

预览文本

属性控制

渐变类型

线性渐变属性

径向渐变属性

圆锥渐变属性

渐变颜色

背景属性

文本预览

生成的CSS代码

Copyright© 2025 GptKong.com. All Rights Reserved.┊沪ICP备2021014086号-6

CSS3背景与渐变在线学习工具

实时预览

预览文本

属性控制

渐变类型

线性渐变属性

径向渐变属性

圆锥渐变属性

渐变颜色 + 添加

背景属性

文本预览

生成的CSS代码

精美渐变模板

新手引导

🎨 欢迎使用CSS3背景与渐变学习工具

快速开始：

高级功能：

快捷键：

✨ AI智能推荐

📚 CSS3背景与渐变属性学习

属性目录

📏 线性渐变 (Linear Gradient)

语法格式

angle（角度）

方向关键字

示例：

⭕ 径向渐变 (Radial Gradient)

语法格式

shape（形状）

size（大小）

position（位置）

示例：

🌀 圆锥渐变 (Conic Gradient)

语法格式

from angle（起始角度）

at position（中心位置）

示例：

🎨 颜色停止点 (Color Stops)

位置单位

多停止点技巧

示例：

🖼️ 背景属性 (Background Properties)

background-size

background-repeat

background-attachment

background-position

💡 实用技巧与最佳实践

1. 多重渐变

2. 渐变边框

3. 渐变文字

4. 性能优化

5. 可访问性

🌐 浏览器兼容性

添加浏览器前缀

Copyright© 2025 GptKong.com. All Rights Reserved.┊沪ICP备2021014086号-6

渐变颜色