CSS Gradient Generator

What is a CSS gradient generator?#

A CSS gradient is a smooth transition between two or more colours, painted by the browser along a line, a ray, or around an angle. Used well, a single gradient can replace a 200-kilobyte background image — it scales to any size, stays sharp on every screen, and ships in one line of CSS. The hard part is not writing the syntax, it is seeing the result while you tune the colours, the angle, and the stops.

This page is a live workbench for that. You drag stops, slide the angle, switch between five gradient kinds, and the page emits the exact linear-gradient(...) (or radial-, conic-, repeating-) declaration your stylesheet needs — plus a ready-to-paste Tailwind v4 @theme snippet that turns each colour into a reusable token.

How to use it#

1. Pick a Type:
   • linear — colour transitions along a straight line at a chosen angle. The default; covers most use cases.
   • radial — colours radiate outward from a centre point. Good for spotlights and vignettes.
   • conic — colours sweep around a centre like a pie chart. Useful for colour wheels and spinner backgrounds.
   • repeating-linear / repeating-radial — the same gradient tiled, producing stripes or concentric rings.
2. For linear and conic types, drag the Angle slider (0–359°). The preview updates live; 0° points upward, 90° points right, 135° is the classic top-left-to-bottom-right diagonal.
3. For radial types, pick a Shape — circle or ellipse (the default for responsive full-bleed backgrounds).
4. Manage your colour stops:
   • Each stop has a colour swatch and a position on the gradient bar (0–100%).
   • Drag the handles on the bar to move a stop, or type a precise position.
   • Click + Add stop to insert a new one; click the × on a stop to delete it.
   • A gradient needs at least two stops.
5. Read the two outputs at the bottom: CSS (the raw gradient value) and Tailwind v4 (an @theme block that registers each colour as a --color-grad-* token, plus a .bg-gradient utility that consumes them). Use the copy button next to each.

Key features#

• Five gradient kinds in one tool. Linear, radial, conic, and both repeating variants — switch without re-entering colours.
• Live, pixel-accurate preview. The big block on the right is the actual gradient you will ship; what you see is what your stylesheet gets.
• Drag-handle stop bar. Reposition any colour stop by dragging; the percentage updates as you move.
• Dual output. Raw CSS for hand-written stylesheets, and a Tailwind v4 @theme snippet (each stop becomes a --color-grad-* token, consumed by a .bg-gradient utility) for utility-first projects — both always in sync.
• Angle readout. The exact degree is shown next to the slider, so you can reproduce a gradient precisely elsewhere.
• Zero upload. Colours, stops, and angle never leave the browser.

Worked example#

Suppose you want a calm, slightly diagonal brand gradient going from indigo to teal. Choose linear, set the angle to 135°, and use two stops:

• Stop 1: #4F46E5 at 0% (indigo)
• Stop 2: #0D9488 at 100% (teal)

The CSS output is:

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

and the Tailwind v4 snippet is:

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

Rather than inlining the hex values, the Tailwind output registers each stop as a --color-grad-* design token inside @theme, then points a single .bg-gradient utility at them through var(...). Change one variable and every place that consumes it updates at once. Want a third, softer colour in the middle? Click + Add stop, set #7C3AED at 50%, and the snippet grows a --color-grad-2: #7C3AED token while the teal shifts down to --color-grad-3 — the stops are always renumbered by position, so the names never go out of sync with the bar.

FAQ#

What is the difference between linear, radial and conic?#

Linear transitions along a straight line defined by an angle. Radial transitions outward from a point, producing a circle or ellipse of colour. Conic transitions around a point — imagine a colour wheel rotating, where each angle is a different hue. The repeating variants of each tile the pattern to create stripes or rings.

Why does the Tailwind output define --color-grad-* variables instead of inlining the colours?#

Tailwind v4 moved configuration into CSS through the @theme block, where every entry becomes a reusable design token. By emitting each stop as --color-grad-1, --color-grad-2, … and having .bg-gradient reference them via var(...), the snippet hands you a palette you can reuse anywhere — borders, text, shadows — not just this one background. Edit a single variable and every consumer updates at once. (On Tailwind v3 there is no @theme; paste the CSS output into your stylesheet instead.)

Can I make a hard colour step instead of a smooth blend?#

Yes. Give two stops the same position — for example #000 50% and #fff 50%. With no distance between them, the blend has zero width, so the transition becomes a hard line. This is how you build striped or banded backgrounds without an image.

The conic gradient looks rotated compared to my design tool. Why?#

Different tools measure the starting angle of a conic gradient differently. CSS measures the from angle clockwise from the top (12 o’clock). If your design tool measures from the right (3 o’clock) or counter-clockwise, subtract or add 90° (or flip the sign) until the preview matches.