如何使用CSS渐变生成矩形？

根据你需要的渐变矩形效果，用CSS的渐变属性就能轻松实现，以下是具体实现方法：

线性渐变矩形（最常用） #

如果你的目标是类似上下/左右过渡的渐变矩形，用linear-gradient()：

.gradient-rect {
  width: 300px; /* 按需设置矩形宽度 */
  height: 200px; /* 按需设置矩形高度 */
  background: linear-gradient(to bottom, #ff7e5f, #feb47b); /* 垂直方向：橙红→浅橙渐变 */
  /* 可选：给矩形加圆角，匹配常见的示例效果 */
  border-radius: 8px;
}

对应的HTML结构很简单：

<div class="gradient-rect"></div>

自定义渐变参数 #

你可以根据预期效果灵活调整：

• 渐变方向：把to bottom改成to right就是水平渐变，to bottom right就是对角渐变
• 颜色节点：添加更多颜色，比如linear-gradient(to right, #4facfe, #00f2fe, #43e97b)实现多色过渡
• 过渡位置：指定颜色的百分比，比如linear-gradient(to bottom, #ff7e5f 30%, #feb47b 80%)，让渐变在特定位置完成过渡

径向渐变矩形（中心向外扩散） #

如果你的预期效果是从中心向外的圆形/椭圆渐变，用radial-gradient()：

.radial-rect {
  width: 300px;
  height: 200px;
  background: radial-gradient(circle at center, #ff6b6b, #4ecdc4); /* 中心向外：红→青渐变 */
}

只要替换成你需要的颜色值和渐变方向，就能完全匹配目标效果。

内容的提问来源于stack exchange，提问作者Alice Jones