CSS渐变生成器 – 线性、径向和锥形

你的渐变

Adjust the controls to create your perfect gradient.

Live 预览

CSS渐变：完整指南

A CSS gradient is a smooth transition between two or more colors rendered entirely by the browser — no image files needed. Gradients scale perfectly at any resolution, load instantly, and can be animated. They are used for page backgrounds, button fills, card headers, text effects, progress bars and decorative dividers.

Use the generator above to create linear, radial or conic gradients visually, add as many color stops as you need, and copy the CSS or Tailwind output instantly.

How to Use This 渐变生成器

Pick gradient type — 线性, 径向 or 锥形. 线性 flows in one direction; radial radiates from a point; conic sweeps around.
Add color stops — Click "+ Add 颜色 Stop" to layer colors. Drag the slider to position each stop along the gradient.
Adjust direction or angle — Set degrees for linear and conic, or position for radial. Click any preset to load a ready-made gradient.
复制 the code — Switch between CSS, Tailwind and SCSS tabs and paste into your project.

线性 Gradients

线性 gradients transition colors along a straight line at a specified angle. 0deg goes bottom to top, 90deg goes left to right, 135deg goes diagonally.

/* Two colors */
background: linear-gradient（线性渐变）(135deg, #7c6fff, #ff6fb0);

/* Three color stops */
background: linear-gradient（线性渐变）(135deg, #7c6fff 0%, #ff6fb0 50%, #f7c948 100%);

/* With custom stop positions */
background: linear-gradient（线性渐变）(to right, #0f0c29, #302b63 40%, #24243e);

/* Repeating stripe pattern */
background: repeating-linear-gradient（线性渐变）(
  45deg, #7c6fff 0px, #7c6fff 10px, transparent 10px, transparent 20px
);

径向 Gradients

径向 gradients radiate outward from a center point in a circle or ellipse. Great for spotlight effects, glowing buttons and vignette overlays.

/* Basic radial */
background: radial-gradient（径向渐变）(circle, #7c6fff, #0a0a0f);

/* Positioned spotlight */
background: radial-gradient（径向渐变）(circle at 30% 40%, #ff6fb0, transparent 60%);

/* Elliptical gradient */
background: radial-gradient（径向渐变）(ellipse at center, #7c6fff 0%, #0a0a0f 70%);

锥形 Gradients

锥形 gradients rotate colors around a center point like a color wheel or pie chart. Supported in all modern browsers.

/* 颜色 wheel */
background: conic-gradient（锥形渐变）(red, yellow, green, blue, red);

/* Pie chart segments */
background: conic-gradient（锥形渐变）(#7c6fff 0% 40%, #ff6fb0 40% 70%, #f7c948 70% 100%);

/* Starting from a different angle */
background: conic-gradient（锥形渐变）(from 45deg, #7c6fff, #ff6fb0, #7c6fff);

Gradient Text

Apply a gradient to text using background-clip: text with a transparent text color. Works in all modern browsers.

.gradient-text {
  background: linear-gradient（线性渐变）(135deg, #7c6fff, #ff6fb0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Gradient Borders

CSS doesn't have a native gradient-border property, but you can achieve it with background-clip:

.gradient-border {
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient（线性渐变）(var(--bg), var(--bg)) padding-box,
    linear-gradient（线性渐变）(135deg, #7c6fff, #ff6fb0) border-box;
}

Want to build gradient borders visually with rounded corners, multi-stop colors and copy-paste output? Use our CSS Gradient Border Generator →

Animating Gradients

CSS gradients cannot be directly transitioned, but you can fake animation using background-position on an oversized gradient, or the @property API to animate color stops in modern browsers.

/* Animated gradient via background-position */
.animated-gradient {
  background: linear-gradient（线性渐变）(135deg, #7c6fff, #ff6fb0, #f7c948, #7c6fff);
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Mesh Gradients in CSS

Mesh gradients create rich, multi-point color blends that mimic the mesh gradient tools in Figma and Illustrator. CSS doesn't have a native mesh-gradient property yet, but you can fake them by layering multiple radial-gradient（径向渐变） backgrounds with different positions and blend modes.

.mesh-gradient {
  background:
    radial-gradient（径向渐变）(at 20% 30%, #7c6fff 0%, transparent 50%),
    radial-gradient（径向渐变）(at 80% 20%, #ff6fb0 0%, transparent 50%),
    radial-gradient（径向渐变）(at 50% 80%, #06b6d4 0%, transparent 50%),
    radial-gradient（径向渐变）(at 30% 70%, #22c55e 0%, transparent 50%);
  background-color: #0a0a0f;
}

For animated mesh gradients, the CSS @property API lets you register custom properties that can be animated. This technique enables smooth color transitions that CSS transitions can't normally handle:

@property --color-a {
  syntax: '<color>';
  initial-value: #7c6fff;
  inherits: false;
}
@property --color-b {
  syntax: '<color>';
  initial-value: #ff6fb0;
  inherits: false;
}

.animated-mesh {
  background:
    radial-gradient（径向渐变）(at 20% 30%, var(--color-a) 0%, transparent 50%),
    radial-gradient（径向渐变）(at 80% 70%, var(--color-b) 0%, transparent 50%);
  animation: mesh-shift 6s ease-in-out infinite alternate;
}
@keyframes mesh-shift {
  to {
    --color-a: #06b6d4;
    --color-b: #22c55e;
  }
}

@property is supported in Chrome 85+, Edge 85+ and Safari 15.4+. Firefox added support in Firefox 128+. For older browsers, the gradient renders but the color animation won't play — a safe progressive enhancement.

Browser Support

类型	Chrome	Firefox	Safari
linear-gradient（线性渐变）	26+	16+	6.1+
radial-gradient（径向渐变）	26+	16+	6.1+
conic-gradient（锥形渐变）	69+	83+	12.1+

常见问题

如何制作CSS渐变边框？

CSS has no native gradient-border property. The reliable trick is a double-background with background-clip: border: 2px solid transparent; background: linear-gradient（线性渐变）(white, white) padding-box, linear-gradient（线性渐变）(135deg, #7c6fff, #ff6fb0) border-box;. Want a tool that generates this for you with rounded corners? See our gradient border guide.

线性 vs radial vs conic — which gradient should I use?

Use linear-gradient（线性渐变） for backgrounds, buttons, headers — anything where colors flow in a direction. Use radial-gradient（径向渐变） for spotlight, sun-like or vignette effects radiating from a point. Use conic-gradient（锥形渐变） for pie charts, color wheels, loading spinners, or any sweep around a center.

为什么我的渐变出现条纹（色带）？

Banding (visible color steps) happens when the gradient spans a long distance with too few color stops, or on 8-bit displays with similar adjacent colors. Add intermediate color stops to smooth the transition, or add subtle film-grain noise as an overlay. Diagonal gradients band less than perfectly horizontal or vertical ones.

How do I animate a CSS gradient?

Gradients themselves can't transition directly. Two approaches: animate background-position on an oversized gradient (size 300% 300%) for a flowing effect; or use the modern @property API to animate registered custom properties for true color-stop animation. The Animating Gradients section above has working code.

How do I create gradient text in CSS?

Apply the gradient as background, then add background-clip: text and -webkit-text-fill-color: transparent. Works in every modern browser. The Gradient Text section above has copy-paste code.

Are CSS gradients better than image backgrounds?

For solid color transitions, almost always yes. CSS gradients scale to any resolution without quality loss, load instantly with no extra HTTP request, and can be themed with custom properties. Use images only when you need photographic textures or hand-painted artwork.

Want a deep dive into gradient techniques including mesh gradients and advanced animations? Read our complete CSS gradients guide →

Tool last updated: 五月 2026