CSS Gradient Generator: Linear & Radial

What Is Gradient Generator?

Gradient Generator is a browser-based visual editor for creating CSS gradients — linear, radial, and conic — with multiple color stops and adjustable parameters. It outputs production-ready CSS that you can copy into any stylesheet. The tool previews the gradient in real time as you make changes, so there is no guess-and-check cycle between the editor and your browser's developer tools. Designers use it to prototype gradient backgrounds and generate precise CSS, and developers use it to export SVG gradient files for scalable assets.

Key Features

• Linear, radial, and conic gradients — Three distinct gradient types selectable with a single click. Each type outputs the correct CSS function: linear-gradient(), radial-gradient(), or conic-gradient().
• Multiple color stops with positions — Add as many color stops as needed. Each stop has a color picker, a hex input, and a position slider from 0% to 100%. The minimum is two stops; the tool shows an error toast if you try to remove the last two.
• Adjustable gradient angle — A slider controls the angle from 0° to 360° for linear and conic gradient types. The angle is embedded directly in the CSS output.
• Real-time CSS code generation — The CSS output card updates immediately on every change. The output format is background: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%); — ready to paste.
• Preview gradient instantly — A 256px-tall preview panel at the top of the tool renders the gradient using the live CSS value as an inline style.
• Copy CSS with one click — The Copy CSS button copies the full background: ...; declaration to the clipboard and logs the entry to your history.
• Repeating gradient support — Not currently shown as a separate control, but the CSS output can be edited manually to swap linear-gradient for repeating-linear-gradient if needed.
• Browser-compatible CSS output — The generated CSS uses standard unprefixed syntax supported by all modern browsers.

How to Use Gradient Generator

Step 1: Choose a gradient type

Navigate to Gradient Generator. The tool opens with a default linear gradient from #8E2DE2 (violet) at 0% to #33FFDD (bright teal) at 100%, rendered at 90 degrees.

In the Gradient Type card, click one of three buttons: Linear, Radial, or Conic. The preview updates immediately. For linear and conic types, an angle slider appears below the type selector.

Step 2: Set the angle (linear and conic only)

Drag the Angle slider between 0 and 360 degrees. The current angle value is displayed as a label (e.g., Angle: 135°). 0° flows top to bottom, 90° flows left to right, 180° flows bottom to top, and 270° flows right to left. The preview updates on every slider movement so you can find the right angle visually.

For radial gradients, the angle control is hidden because radial-gradient(circle, ...) does not use an angle parameter.

Step 3: Configure color stops

The Color Stops card lists each stop as a row containing:

• A native color input (colored square) — click to open the browser color picker
• A hex text input showing the current color value
• A position slider from 0 to 100%
• A position percentage label (e.g., 45%)
• A delete button (Trash icon)

Both the color input and the hex text input update the same stop. Changing either one refreshes the preview immediately.

Click Add Stop to insert a new color stop at a random position with a white default color. Edit the color and position to place it where you need it.

Step 4: Remove a color stop

Click the Trash icon on any stop row to delete it. If only two stops remain, clicking Trash shows the error message "Minimum 2 color stops required" as a toast and keeps both stops intact.

Step 5: Copy the CSS output

The CSS Output card shows the complete declaration:

background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);

Click Copy CSS to copy this string to the clipboard. A success toast confirms the copy. The entry is also logged to the History panel (for supporter accounts) with the gradient type, angle, and CSS value.

Step 6: Export as SVG (supporter feature)

Click the SVG button (with a Download icon) to export the gradient as an SVG file. For linear gradients, the SVG uses a <linearGradient> element with a gradientTransform="rotate(angle, 0.5, 0.5)" attribute. For radial gradients, it uses <radialGradient>. The file downloads as gradient.svg. This is a premium supporter feature.

Step 7: Randomize or reset

Click Randomize (circular arrow icon) to generate a new gradient with two random colors and a random angle. Click Clear to reset the gradient to the default violet-to-teal linear gradient at 90°.

Practical Examples

Hero section background gradient

You want a 135° diagonal gradient from #667EEA (medium blue-violet) to #764BA2 (deep purple) for a landing page hero. Set type to Linear, drag the angle slider to 135, change stop 1 to #667EEA at 0%, and stop 2 to #764BA2 at 100%. Click Copy CSS and paste:

.hero {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}

Radial spotlight effect

You want a radial gradient that appears to spotlight the center of a card. Set type to Radial. Change stop 1 to #FFFFFF at 0%, add a third stop at 50% with #F1F5F9, and set stop 2 (now stop 3) to #CBD5E1 at 100%. The output:

background: radial-gradient(circle, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);

Use this as a subtle depth effect on white card surfaces.

Conic color wheel preview

Set type to Conic and angle to 0°. Add six stops evenly spaced: red (#FF0000) at 0%, yellow (#FFFF00) at 17%, green (#00FF00) at 33%, cyan (#00FFFF) at 50%, blue (#0000FF) at 67%, and magenta (#FF00FF) at 83%. The last stop closes back to red naturally. Export as SVG to use the wheel in a color-theory diagram.

Tips and Best Practices

Color stops are sorted by position before generating CSS. You can add stops in any order — the tool always sorts them ascending before writing the output. This means dragging a 0% stop past a 50% stop in the slider will correctly reorder the CSS.

Use the Randomize button for creative starting points. The randomizer generates two random hex colors and a random angle. Click it repeatedly until you find a palette worth refining, then adjust the colors manually.

Paste an existing gradient to reverse-engineer it. The tool does not yet support pasting a CSS gradient string directly. However, you can extract the color stop values from an existing gradient and enter them manually.

Shareable URLs encode all gradient parameters. The gradient type, angle, and color stops (as a compact color:position string) are serialized into the page URL. Copy the URL to share your exact gradient configuration with a teammate.

The SVG export uses a 400×200px canvas. The exported gradient.svg has width="400" height="200" and a <rect> filled with the gradient. Scale it freely since SVG is resolution-independent.

Minimum two stops is enforced with a toast message. If you try to delete a stop when only two remain, the error toast reads "Minimum 2 color stops required" — the gradient needs at least two stops to be valid CSS.

Common Issues and Troubleshooting

CSS output says background: ; (empty gradient). This should not occur under normal use. If the color stops array is somehow empty (possible only through a URL state corruption), the generateCss function returns an empty string. Clear the tool with the Reset button or reload the page to restore the default state.

Color stop hex input shows wrong color after typing. The hex input is directly tied to the stop's color value. If you type an invalid hex (e.g., #ZZZZZZ), the color picker input will not update and may show the previous valid color. Correct the hex to a valid 6-digit value.

Position slider is hard to position precisely. The slider accepts values in 1% increments. For precise positioning, type the percentage directly — however, the current UI uses a slider only. Use nearby round numbers and verify in the CSS output.

Radial gradient looks off-center. The generated radial gradient uses radial-gradient(circle, ...) which centers at 50% 50% by default. Adding a circle at X% Y% is not yet available in the UI. Edit the copied CSS manually in your stylesheet to reposition the center.

SVG export shows only linear or radial. The SVG export function handles linear gradient as <linearGradient> and all other types (including conic) as <radialGradient>. Conic gradients do not have an SVG equivalent, so they fall back to radial in the SVG export.

History restore only partially restores state. The history restore function parses the gradient type and angle from the stored history entry text. It does not restore color stops from history (the color stops are preserved in the shareable URL state instead). Use the share URL for full state restoration.

Privacy and Security

Gradient Generator runs entirely in your browser. The CSS generation, color stop management, and SVG export logic are all pure JavaScript. No gradient configurations, color values, or usage data are sent to any external server. The SVG export uses downloadText to write a local file — no upload occurs. The tool works fully offline after the page loads and is safe for use with proprietary or unreleased design assets.

Frequently Asked Questions

Is Gradient Generator free to use?

Yes. All core features — linear, radial, and conic gradient creation, multiple color stops, angle control, CSS copy, and randomization — are free with no account required. The SVG export button is a premium supporter feature requiring a Ko-fi supporter subscription.

Does Gradient Generator work offline?

Yes. Once the page loads, all gradient generation, preview rendering, and CSS output work without internet access. The only online-dependent features are initial page load and the share URL, which encodes state into the URL itself (no server call needed to read the state).

Is my data safe with Gradient Generator?

Yes. No gradient parameters or color values are transmitted to any server. The tool has no backend for gradient generation. Your designs remain entirely on your device. The shareable URL encodes the state in the URL string itself — no server stores it.

What CSS gradient types does the tool support?

The tool supports three CSS gradient types: linear-gradient(), radial-gradient(), and conic-gradient(). The CSS output uses standard unprefixed syntax. For browser support, linear-gradient and radial-gradient work in all modern browsers; conic-gradient requires Chrome 69+, Safari 12.1+, and Firefox 83+.

How do I create a multi-stop gradient?

Click Add Stop to insert additional color stops. Each new stop appears at a random position with white as the default color. Click the color swatch or type a hex value to set the color, then drag the position slider to place it. There is no upper limit on the number of stops.

Can I remove a color stop?

Yes. Click the Trash icon on any stop row. If only two stops remain, the tool prevents removal and shows a toast: "Minimum 2 color stops required." A valid CSS gradient needs at least two color stops.

What does the exported SVG file contain?

The SVG export creates a 400×200px file with a <defs> block containing a <linearGradient> (for linear type) or <radialGradient> (for radial and conic types), and a <rect> element that fills the entire canvas with that gradient. The file is named gradient.svg and downloads automatically.

Can I use the generated CSS in Tailwind CSS?

Yes. Paste the linear-gradient(...) value (without the background: prefix) into your Tailwind config as a custom background image:

backgroundImage: {
  'brand-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
}

Then use it as bg-brand-gradient in your HTML.

Does the tool support transparent color stops?

The color inputs accept only opaque hex values (6-digit). To create a gradient with transparency, copy the CSS output and manually modify the stop colors to use rgba() notation in your stylesheet, for example: linear-gradient(90deg, rgba(142, 45, 226, 0) 0%, #4A00E0 100%).

How do I share a gradient with someone?

Copy the URL from your browser's address bar after configuring your gradient. The URL encodes the gradient type, angle, and all color stop values. Opening that URL on another device loads the exact same gradient. You can also use the Share buttons at the bottom of the page to post to Twitter, LinkedIn, Reddit, or copy the link directly.

Related Tools

• UI Gradients — Browse a curated library of named gradients and copy their CSS values directly.
• Color Picker — Use the EyeDropper or format inputs to find exact hex colors before adding them as gradient stops.
• Color Blender — Generate smooth intermediate colors between two values, useful for manually planning multi-stop gradients.
• Palette Generator — Generate harmonious color palettes to use as gradient stop sources.

Try Gradient Generator now: Glyph Widgets Gradient Generator