CSS Gradient Generator — Linear, Radial, Conic, Multi-Stop

Build linear, radial, or conic CSS gradients with live preview. Multi-color stops, angle slider, presets, Tailwind v4 output.

CSS Gradient Generator is for the 30-second task of getting a CSS gradient just right — pick two or three colors, set an angle, copy the CSS. No more digging through Chrome DevTools to manually edit a gradient on a live page.

Pickrack's Gradient Generator supports all three CSS gradient types (linear, radial, conic), 2-6 color stops, an angle slider (0-360°) for linear and conic gradients, and 5 starter presets (Sunset, Ocean, Mojito, Cosmic, Aurora). Live preview updates as you drag any slider or change any color. Output includes plain CSS plus a Tailwind v4 arbitrary-value snippet for direct paste into JSX.

Free, no signup, browser-side. The generator is pure JavaScript — your color choices and the output CSS never leave your tab.

Key features

Linear, radial, and conic gradients — Three CSS gradient types via tab toggle. Each supports up to 6 color stops at custom positions.
Angle slider — For linear and conic gradients, drag 0-360° to set the direction. Live preview reflects the change instantly.
Color picker per stop — Each stop has a native color picker (any RGB) plus a hex text input for manual entry. Drag the position slider to set where each color sits.
5 starter presets — Sunset, Ocean, Mojito (linear), Cosmic (radial), Aurora (conic) — click to load and tweak.
Randomize button — Generates a random 2-4 stop gradient with random colors and angle for inspiration.
Tailwind v4 output — Copy as standard CSS, or grab the Tailwind v4 arbitrary-value class for direct paste into a className attribute.

How to use

Step 1: Pick a gradient type — Linear (default — straight-line transition), Radial (circular outward), or Conic (rotational sweep).
Step 2: Set the angle (linear / conic only) — Drag the angle slider. 0° = vertical bottom-to-top, 90° = horizontal left-to-right, 135° = diagonal.
Step 3: Adjust colors — Click each color swatch to open the picker. Drag each stop's position slider to set where that color appears (0% = start, 100% = end).
Step 4 (optional): Add or remove stops — Click 'Add stop' for up to 6 colors total. Click the trash icon to remove a stop (minimum 2 required).
Step 5: Copy — Click 'Copy' on the CSS output. Paste into your stylesheet or JSX className. Or grab the Tailwind v4 snippet below for direct paste.

When to use

Landing page hero background — generate a brand-color gradient for a hero section
Button states — design a gradient for hover/active button states matching your brand
Card background — apply a subtle gradient to product cards or feature blocks
Loading skeleton — generate a gradient for shimmer-loading effects (animate position with CSS keyframes)
Background fill for empty states — gradient backgrounds for 'no results' or onboarding screens
Tailwind project quick prototyping — get arbitrary-value Tailwind class for a one-off gradient without extending the config

Frequently asked questions

How do I use the gradient in Tailwind?

The output panel shows a Tailwind v4 arbitrary-value class like bg-[linear-gradient(...)]. Tailwind v4 supports arbitrary values for any property. Paste the class directly into your className. For Tailwind v3 with config: extend backgroundImage in tailwind.config.js with the CSS as a string.

What's the difference between linear, radial, and conic gradients?

Linear: colors transition along a straight line at a chosen angle. Radial: colors transition outward from a center point (circular). Conic: colors transition by rotating around a center point (like a color wheel slice). Use linear for most purposes; radial for spotlight/highlight effects; conic for pie-chart-like backgrounds or unique loading spinners.

Can I use the gradient as a border or text fill?

Yes via standard CSS techniques. Border: border: 4px solid transparent; background: linear-gradient(white, white) padding-box, [your gradient] border-box;. Text fill: background: [gradient]; -webkit-background-clip: text; color: transparent;. The tool outputs the gradient string; the technique is your CSS to write.

Why are my stops in a weird order in the output?

The output sorts stops by position automatically (0% → 100%). If you set stop 1 at 80% and stop 2 at 20%, the output reorders them. This matches CSS's gradient rendering — position determines order, not the order you added them.

Does it support gradient transparency (semi-transparent stops)?

Yes via hex colors with alpha (8-digit hex like #FF0000AA). The native color picker doesn't expose alpha — type the 8-digit hex directly into the text input. RGB notation (rgba(255,0,0,0.5)) is not currently parsed; convert to 8-digit hex.

Can I save my gradient for later?

Not in v1 — gradients are stateless. To save: copy the CSS output and paste into your project's stylesheet. localStorage-based gradient history is on the roadmap.

Why does Random sometimes generate ugly gradients?

Random picks pure random hex values, which often clash (e.g., bright pink + lime green). It's for inspiration, not finished design. Use it as a starting point, then refine the colors manually with the picker.

Related tools

Color Palette Extractor

Extract dominant colors from any image with median-cut quantization. Hex + RGB output, CSS array export. Browser-side.

JSON Formatter

Format, validate, and minify JSON. Detects errors with line numbers. Browser-side, your data never leaves your device.

Regex Tester

Test regular expressions live with match highlighting and capture groups. Supports JavaScript regex flags.