CSS Gradient Generator Online — Linear & Radial

How to Generate a CSS Gradient

1. Open the CSS Gradient Generator.
2. Choose Linear or Radial gradient type.
3. For linear gradients, select a direction from the preset buttons (Right, Bottom, Bottom-Right, etc.).
4. Click each color swatch to pick a color. Drag the position slider to move the stop.
5. Click Add Stop to insert additional color stops for multi-color gradients.
6. Click Copy CSS — the complete background: linear-gradient(...); declaration is on your clipboard.

Paste directly into any CSS rule. The output works in all modern browsers without vendor prefixes.

Linear vs Radial Gradients

Understanding Color Stops

A color stop defines where a particular color appears within the gradient. Each stop has two values: the color and a position percentage. A stop at 0% is at the start of the gradient; 50% is the midpoint; 100% is the end.

If you place two stops at the same position with different colors, you get a hard edge with no blend — useful for striped patterns:

background: linear-gradient(
  90deg,
  #667eea 0%, #667eea 50%,
  #764ba2 50%, #764ba2 100%
);

Advanced Gradient Techniques

Diagonal gradients

Use 135deg for a top-left to bottom-right gradient. Unlike the to bottom right keyword (which adjusts to the element's aspect ratio), a degree value stays at exactly the specified angle regardless of element shape.

Transparent fade effects

Fade text into the background by ending with a transparent stop. Replace the ending color with transparent or an rgba value with 0 opacity:

background: linear-gradient(90deg, #667eea 0%, transparent 100%);

Repeating gradients

Use repeating-linear-gradient() to tile a pattern. Define one tile and the browser repeats it infinitely. This creates stripes, chevrons, and other repeating patterns without images:

background: repeating-linear-gradient(
  45deg,
  #667eea,
  #667eea 10px,
  #764ba2 10px,
  #764ba2 20px
);

Layering multiple gradients

The background property accepts a comma-separated list. The first gradient renders on top:

background:
  radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 50%),
  linear-gradient(135deg, #667eea 0%, #764ba2 100%);

This stacks a subtle highlight glow over a base gradient — a common technique for premium-looking UI cards.

Gradient Accessibility

If text sits over a gradient, check the contrast at both the lightest and darkest points of the gradient. A gradient that starts light and ends dark may pass contrast at one end and fail at the other. Use a single, high-contrast text color that works across the entire gradient range, or limit text to the portion of the gradient where contrast is guaranteed sufficient.

Common Questions

Do CSS gradients need vendor prefixes?

No. linear-gradient() and radial-gradient() are fully supported in all modern browsers without -webkit- or -moz- prefixes. The old prefixed syntax (-webkit-linear-gradient) was only needed for browsers before 2013.

Can I use a gradient as a border?

CSS border properties do not directly accept gradients, but you can simulate one with a combination of border: 2px solid transparent, background-clip: padding-box, and a pseudo-element with the gradient behind it. Alternatively, use background-image with background-origin: border-box for a simpler approach.

How do I create a gradient text effect?

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}