CSS Gradient Generator — Linear, Radial, Conic

CSS gradients in 60 seconds

A CSS gradient is a pure-code way to paint a smooth color transition across an element. No image file, no HTTP request, no blurriness on Retina screens, no bandwidth cost — the browser draws it at whatever resolution the element happens to be. Gradients have three flavors in modern CSS: linear-gradient, radial-gradient, and conic-gradient. All three are supported in every browser released since 2021 (conic landed last, in Chrome 69 / Firefox 83 / Safari 12.1).

The three gradient types

Linear — a straight line

Colors blend along a straight line at the angle you specify. 0° points straight up, 90° points right, 180° down, 270° left. The default (if you omit the angle) is to bottom, i.e. 180°. The most common UI gradient — hero backgrounds, card backgrounds, button fills.

background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);

Radial — a circle or ellipse

Colors radiate outward from a center point. You specify the shape (circle or ellipse) and the position (center, top left, or a specific coordinate). Use for spotlight effects, vignettes, or soft glows behind a subject.

background: radial-gradient(circle at center, #fbcfe8 0%, #ec4899 60%, #831843 100%);

Conic — a color wheel sweep

Colors sweep around a center point like a clock hand. Defined by a starting angle (from 0deg) and a position (at center). Most famously used to build CSS-only pie charts, donut charts, loading spinners, and aurora-style backgrounds. Harder to use well — conic gradients often look busy — but unbeatable when you need them.

background: conic-gradient(from 0deg at center, #8b5cf6 0%, #06b6d4 33%, #10b981 66%, #8b5cf6 100%);

Color stops, the key idea

Every gradient is a list of color stops: a color plus a position from 0% to 100%. The browser smoothly interpolates the colors between stops. With two stops you get a simple blend from A to B. With three or more you get multi-color transitions — useful for sunset effects, rainbow sweeps, and anywhere you want a specific color at a specific point.

Tricks with stops:

• Hard stops: place two stops at the same position (#f00 50%, #0f0 50%) to create a sharp line instead of a blend. Useful for stripes, split backgrounds, and color-coded bars
• Unequal spacing: a stop at 10% and another at 90% creates a long blend with solid color at each end. Pull both stops closer together (30% and 70%) for a tighter transition
• Same-color endpoints: make the first and last stop the same color for a seamless loop. Essential for conic gradients you want to tile
• Transparent stops: use transparent or rgba(0,0,0,0) for fade-to-nothing effects over other content

How to use this tool

1. Pick a type: Linear, Radial, or Conic
2. Click a preset (Sunset, Mint, Aurora, Bloom) for a fast start
3. Adjust the type-specific control: angle for linear, shape + position for radial, starting angle for conic
4. Edit color stops: click the swatch to open the native color picker, type a hex value directly, or drag the position slider
5. + Add stop up to 5 total, remove with the ✕ button (minimum 2 stops)
6. Copy the output in three formats: raw CSS (background: …), background-image:, or Tailwind's arbitrary value syntax (bg-[linear-gradient(...)])

When to use background vs background-image

The shorthand background: linear-gradient(...) resets everything: background-color, background-position, background-repeat. If you want to layer a gradient on top of a solid color (common for fallbacks on ancient browsers) use background-image instead:

background-color: #4f46e5;                  /* fallback */
background-image: linear-gradient(135deg, #4f46e5, #10b981);

Fallbacks are rarely needed in 2025 — every browser the target audience uses supports gradients. Use background-image when you want to layer multiple gradients on top of each other, which CSS supports natively:

background-image:
  linear-gradient(180deg, rgba(0,0,0,0.4), transparent),
  linear-gradient(135deg, #4f46e5, #10b981);

Tailwind v4 arbitrary values

Tailwind does not ship a preset gradient scale — instead it has utility classes (bg-gradient-to-r, from-*, via-*, to-*) for simple 2- and 3-stop linear gradients. For anything more complex — angles, radial, conic, 4+ stops — use an arbitrary value:

<div class="bg-[linear-gradient(135deg,#4f46e5_0%,#10b981_100%)]">...</div>

The _(underscore) replaces spaces because Tailwind treats spaces as class separators. This tool's Copy as Tailwind button handles the escaping automatically.

Performance and accessibility

• Gradients are cheap. Browsers render them on the GPU as fragment shader work. A full-viewport gradient adds essentially zero to paint time
• But text on gradients is not cheap. If you layer text over a gradient background, verify contrast for both ends of the gradient. A pale stop at the top of a hero can make white text unreadable even when the bottom passes
• Respect prefers-reduced-motion. Animated gradients (shifting hues, moving stops) should be disabled for users who prefer reduced motion
• No Retina penalty. Gradients are vector. They look identical at 1x, 2x, and 3x pixel densities, and cost nothing extra. This is the single biggest win over gradient JPEGs

Common mistakes

• Forgetting deg: linear-gradient(135, …) is invalid. You need the unit: 135deg. The parser will silently produce no gradient if you forget
• Muddy middles: blending complementary colors (red→green, blue→orange) through RGB interpolation passes through gray. Use adjacent hues or pick an intermediate stop to keep the middle lively
• Angle confusion: CSS angles start at the top (0° is up) and rotate clockwise. This is the opposite of most math conventions. If your gradient looks 90° off, you probably subtracted 90 instead of added
• Conic gradients without a repeat: unless your first and last stop are the same color, a conic gradient will have a visible seam at the starting angle. Close the loop

Privacy

Everything runs in your browser — no server knows what colors you pick. Safe for unreleased brand work, client mockups, and private design exploration.

Frequently asked questions

Why does my gradient look banded?

Banding — visible stripes in what should be a smooth transition — happens because monitors only have 256 levels per color channel. A very subtle gradient (say, #222 to #444 across a large area) has only 34 distinct steps to work with, and you can see each one. Fixes: use a shorter distance, pick colors with more contrast, or add faint noise on top (a 1%-opacity noise PNG does the trick). This is a hardware limitation, not a CSS bug.

Can I animate a gradient?

Yes, but with a trick. You cannot transition or animate gradient color stops directly — the browser treats the gradient string as one value. The workaround is to animate background-position on an oversized gradient, or to fade between two stacked gradients with opacity. Respect prefers-reduced-motion.

Does this tool export PNG/JPG?

No — intentionally. The whole point of a CSS gradient is that you ship zero bytes of image and let the browser render it at native resolution. If you need a raster image, paste the generated CSS into any screenshot tool or use a dedicated gradient-to-PNG exporter. Most modern designers keep gradients in CSS and only flatten when exporting PDFs or static assets.

Can I convert a hex gradient to HSL?

This tool works with hex only. To convert individual stops to HSL first, use the Color Converter, then paste hex values back here. HSL gradient strings look like linear-gradient(135deg, hsl(240, 60%, 50%), hsl(160, 70%, 40%)) and work identically.

How do I make a color palette first, then gradient it?

Use the Color Palette Generator to pick a harmonious set (monochromatic, analogous, triadic, etc.), then drop 2–3 of those swatches into this gradient generator as stops. Analogous palettes make the cleanest gradients because the hues are already close on the wheel.

Is my data sent anywhere?

No. No network calls, no analytics on the colors you pick, nothing logged. All gradient rendering is the browser's native background-image property.