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.

When no position is specified, the browser distributes stops evenly. With two stops (start and end), the browser blends smoothly between them. With three stops at 0%, 50%, 100%, the middle color appears at the exact midpoint.

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%
);

Gradient Direction Syntax

For linear-gradient(), direction can be specified as:

• Keywords: to right, to bottom, to top right, etc. — the gradient flows toward the named side or corner.
• Angles: 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left. Any angle is valid.
• Note: to bottom right adjusts to the element's aspect ratio (the diagonal between corners); 135deg stays at exactly 135 degrees regardless of element shape. They produce different results for non-square elements.

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. Use transparentor an rgba() value with 0 opacity. Avoid fading from a solid color directly totransparent in Safari — use rgba(R,G,B,0) with the same RGB values as your start color to prevent a “gray fade” artifact:

/* Correct: same color with alpha 0 */
background: linear-gradient(90deg, #667eea 0%, rgba(102,126,234,0) 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 text effect

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

Note: -webkit-background-clip: text is still required alongside the standard background-clip: text for full browser compatibility.

Popular Gradient Patterns

Gradient Accessibility

If text sits over a gradient, check the contrast at both the lightest and darkest points. A gradient that starts light and ends dark may pass contrast at one end and fail at the other.

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA level) and 3:1 for large text. 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 confirmed sufficient. Avoid placing important text at gradient transition points.

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. The output from the generator is prefix-free and ready to paste into modern CSS.

Can I use a gradient as a border?

CSS border properties do not directly accept gradients, but you can simulate one using aborder-image with a gradient: border-image: linear-gradient(…) 1;This approach has limitations (no border-radius). An alternative using pseudo-elements gives full control: position an ::after pseudo-element with the gradient behind the element using negative z-index and padding.

What is a conic gradient?

conic-gradient() is a CSS Level 4 gradient that radiates colors around a point rather than between two points — like a color wheel or pie chart. The syntax:conic-gradient(from 0deg, red, yellow, green, blue, red) creates a full color rotation. Conic gradients are supported in all modern browsers and are useful for progress indicators and pie charts without JavaScript.