What gradient types does the generator support?

Both linear and radial CSS gradients are supported. Linear gradients flow in a direction you control with the angle slider; radial gradients spread outward from a center point and can be circular or elliptical.

How many color stops can I add?

You can add as many stops as your gradient needs, click any stop to change its color, and drag stops along the bar to reposition them. Two stops are enough for a clean fade; four or more let you build complex transitions.

Can I copy the CSS code directly?

Yes. The generated CSS appears in a code block below the preview and updates live as you tweak settings. One click copies the entire rule, ready to paste into your stylesheet.

Are the gradients production-ready?

Every gradient uses standard CSS that works in every modern browser. No vendor prefixes are required for current Chrome, Firefox, Safari or Edge versions.

Can I use the gradients commercially?

Yes. The output is plain CSS code that you own and can use in any personal or commercial project without attribution.

Back to ToolKnit

Blog Tool Tales

Gradient Generator

Create beautiful CSS gradients with live preview. Linear or radial, custom stops, one-click copy.

Presets CSS Code Random

Type

Angle

135°

Color Stops

Presets

CSS Code

How it works

Three simple steps —everything happens in your browser.

Pick a gradient type

Start with linear or radial mode, then set your angle or shape depending on the effect you want.

Adjust colors and stops

Choose your colors, add or remove stops, and fine-tune their positions until the preview looks right.

Copy the CSS code

Use the generated CSS exactly as shown, or start from a preset and tweak it further for your project.

Features

Linear & Radial

Switch between linear gradients with angle control and radial gradients.

Custom Color Stops

Add up to 6 color stops with individual position sliders for precise control.

Beautiful Presets

12 curated gradient presets to use as-is or as a starting point.

One-Click CSS Copy

Copy production-ready CSS code to your clipboard instantly.

Why choose ToolKnit Gradient Generator?

Linear, radial & conic

Choose gradient type, angle, and add unlimited color stops with live preview.

Copy CSS instantly

One click to copy the ready-to-use CSS code for your gradient.

Random inspiration

Click Random to discover unexpected color combinations you might not pick manually.

Pro Tips

● Use background-size to create repeating gradient patterns.
● Radial gradients are great for spotlight effects and button highlights.
● Click Random to discover unexpected color combinations.