HIFreeTools
ENES

Free CSS Gradient Generator

Build linear and radial CSS gradients with a visual editor. Pick a gradient type, set the angle, add as many color stops as you want, watch a live preview update in real time, and copy clean, ready-to-paste background CSS.

Color stops
%
%
Live preview
CSS
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);

Quick answer

A CSS gradient generator turns visual controls into a CSS background value such as background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);. You choose linear or radial, set an angle for linear gradients, and add color stops (a color plus a position from 0% to 100%). This tool renders a live preview and gives you copyable CSS that works in every modern browser.

Formula & method

Choose a gradient type (linear or radial). For a linear gradient, set the angle in degrees: 0deg points the gradient upward, 90deg points right, 180deg down, and 270deg left. Add two or more color stops, each with a hex color and a position percentage; stops are interpolated in order. The tool assembles the value as linear-gradient(ANGLEdeg, COLOR1 POS1%, COLOR2 POS2%, ...) or radial-gradient(circle, COLOR1 POS1%, ...), prefixes it with "background:", renders a live preview box using that exact value, and exposes the string for one-click copying. Everything runs in your browser; nothing is uploaded.

Examples

Example 1: Red to blue, left to right
Input
Type: linear, Angle: 90deg, Stops: #ff0000 at 0%, #0000ff at 100%
Result
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
Why
At 90deg the gradient runs left to right, starting pure red at 0% and ending pure blue at 100%, blending evenly across the box.
Example 2: Three-stop diagonal sunset
Input
Type: linear, Angle: 45deg, Stops: #ff512f at 0%, #f09819 at 50%, #ff512f at 100%
Result
background: linear-gradient(45deg, #ff512f 0%, #f09819 50%, #ff512f 100%);
Why
A third stop at 50% creates a symmetric band: warm red at both ends with an orange highlight in the middle, angled diagonally bottom-left to top-right.
Example 3: Radial white-to-black spotlight
Input
Type: radial, Stops: #ffffff at 0%, #000000 at 100%
Result
background: radial-gradient(circle, #ffffff 0%, #000000 100%);
Why
Radial gradients ignore the angle and radiate from the center outward. Here a bright white center fades to black at the edges, producing a spotlight or vignette effect.

When to use this tool

  • Designing hero sections, buttons, cards, or page backgrounds that need a smooth color blend instead of a flat fill.
  • Prototyping color schemes quickly by dragging the color picker and instantly seeing the result before committing it to your stylesheet.
  • Generating exact CSS to paste into a stylesheet, styled-component, or Tailwind arbitrary value without memorizing gradient syntax.
  • Recreating a gradient from a design mockup by entering the same hex stops and angle to match it precisely.

Common mistakes

  • Forgetting the # on hex colors. The tool needs a valid hex value like #ff0000 or shorthand #f00; entering ff0000 without the hash is rejected and shows a friendly error instead of broken CSS.
  • Confusing the angle direction. In CSS, 0deg points up and angles increase clockwise, so 90deg is left-to-right, not top-to-bottom. Many people expect 0deg to mean horizontal.
  • Putting color stops out of order or at the same position. Stops are read left to right; a later stop with a smaller percentage creates a hard line. Order stops by ascending position for a smooth blend.
  • Applying the gradient to the color property instead of background. A CSS gradient is an image value, so it must go on background (or background-image), never on color.

Frequently asked questions

How do CSS gradient angles work?

In the linear-gradient() function, the angle sets the direction the gradient progresses. 0deg points to the top, and the angle increases clockwise: 90deg points right, 180deg points down, and 270deg points left. So linear-gradient(90deg, ...) blends from left to right. You can use any value, including negative numbers and decimals like 45.5deg.

What is the difference between linear and radial gradients?

A linear gradient transitions colors along a straight line whose direction you set with an angle. A radial gradient transitions colors outward from a center point in concentric shapes (this tool uses circle), so the first stop is at the center and the last is at the edges. Radial gradients ignore the angle control.

How many color stops can I add?

You can add as many stops as you like; the tool starts with two and lets you add or remove stops with the buttons. A minimum of two stops is required to produce a gradient. Each stop has its own color and a position from 0% to 100% that controls where that color sits along the gradient.

Does the generated gradient work in all browsers?

Yes. Standard linear-gradient() and radial-gradient() syntax has been supported unprefixed in all modern browsers (Chrome, Firefox, Safari, and Edge) for years, so the copied CSS works without vendor prefixes. Only very old browsers like Internet Explorer would need extra handling.

Can I use shorthand hex colors like #f00?

Yes. The tool accepts both three-digit shorthand (#f00) and six-digit hex (#ff0000). Shorthand is expanded by the browser the same way, so #f00 and #ff0000 render identically. Invalid values that are not proper hex codes show an error message instead of producing broken CSS.

Is my data sent anywhere?

No. The entire generator runs in your browser using inline styles and JavaScript. Your colors, angles, and the generated CSS never leave your device and nothing is uploaded to a server.

How do I make a gradient go from top to bottom?

Set the gradient type to linear and the angle to 180deg, which points the gradient downward so the first stop appears at the top and the last at the bottom. Use 0deg for bottom-to-top, 90deg for left-to-right, and 270deg for right-to-left.

Sources & references

External references open in a new tab. We are independent and not affiliated with these organizations.

  • ✓ Free to use
  • ✓ No sign-up required
  • ✓ Runs entirely in your browser — nothing is uploaded.
  • ✓ Formula and method shown above
Last updated: How we calculateReport a correctionDisclaimer

Provided “as is” for general information only — results may be inaccurate, so verify before you rely on them. No warranty; use at your own risk.

Built and reviewed by HIFreeTools against the formula shown above and any authoritative references cited on this page. See our methodology and editorial standards.

Related tools

Embed this tool on your site

Free to embed, no sign-up. Paste this code where you want the css gradient generator to appear: