CSS Gradient Generator

Create beautiful linear and radial gradients instantly

Missing a tool?

Tell us what you'd like us to build next. We read every suggestion, and your email is optional.

What this tool does

The CSS Gradient Generator builds linear and radial color gradients with as many colors as you like, shows them live, and gives you the CSS to copy.

How to use it

  1. Choose Linear or Radial.
  2. For a linear gradient, set the angle.
  3. Pick the colors; + Add Color adds another and × removes one. Randomize gives you a fresh start.
  4. Click Copy CSS and paste it into your stylesheet.

Linear vs radial

  • Linear gradients blend colors along a straight line. The angle sets the direction: 0deg runs bottom to top, 90deg left to right, 180deg top to bottom.
  • Radial gradients spread out from the center in a circle.

The colors are spaced evenly. To control where each one sits, add a percentage after it in the copied code, for example linear-gradient(90deg, #6366f1 0%, #a855f7 70%).

Tips

  • Colors that sit near each other on the color wheel blend smoothly; opposite colors can turn muddy in the middle.
  • If text goes on top, check that it's readable over every part of the gradient.
  • Gradients are images in CSS, so they go in background or background-image, not background-color.

Worked examples

  • Sunset banner: background: linear-gradient(180deg, #ff7e5f, #feb47b); runs from coral at the top to peach at the bottom. Choose Linear, set the angle to 180 and pick the two colors.
  • Soft spotlight: background: radial-gradient(circle, #ffffff, #dbeafe); is white in the middle, fading to pale blue at the edges: a good backdrop for a product photo.
  • Sharp stripes: give two colors the same position and you get a hard edge instead of a blend. linear-gradient(90deg, #1d4ed8 50%, #facc15 50%) splits a box into two flat halves, and repeating-linear-gradient(45deg, #000 0 10px, #facc15 10px 20px) draws warning-tape stripes. Add the positions by editing the copied code.
  • Diagonal glow: background: linear-gradient(135deg, #6366f1, #ec4899); runs from indigo at the top left to pink at the bottom right, a popular look for buttons and hero sections.

Frequently asked questions

Do I need -webkit- prefixes?

No. The standard syntax works in every current browser.

Can I use a gradient as a text color?

Yes, with background-clip: text and a transparent text color, though the text must still be readable without it.

What is a conic gradient?

conic-gradient() sweeps colors around a center point, like a color wheel or a pie chart: conic-gradient(#ef4444 0 25%, #3b82f6 0 100%) draws a pie with a red quarter. All current browsers support it; this tool makes linear and radial gradients.

Can I put text on a gradient?

Yes, but check the contrast against both the lightest and the darkest part: WCAG asks for at least 4.5:1 for normal text. On a busy gradient, a semi-transparent dark layer behind the text helps.

Related tools: Random Color Palette Generator, Box Shadow Generator and Flexbox & Grid Generator.

Sources: MDN Web Docs, linear-gradient() and radial-gradient(); W3C, CSS Images Module Level 3. MDN Web Docs, conic-gradient(); W3C, WCAG 2.2 Contrast (Minimum). Last reviewed on SuiteWebTools: October 2026.