How do CSS gradient angles work here?

As CSS defines them: 0deg points up, 90deg points right, and values increase clockwise. The slider and the output use the same convention, so the copied number is exact.

Can I position the color stops?

The pure two-stop version pins them at the extremes; for interior positions, the multi-stop builder gives each stop its own percentage.

Why does the preview look slightly different from my site?

If colors match and CSS matches, rendering matches — differences usually come from the surrounding surface or color profile. The copied declaration is standard CSS either way.

Can I get the gradient as SVG or an image?

The dedicated exporters output SVG, canvas code and PNG; this generator stays CSS-only by design.

Do the copied stops carry their positions?

Yes — each stop is written out with an explicit percentage, so a two-stop ramp arrives as 0% and 100% rather than as bare colours. That makes the declaration easy to edit later: change a number and the stop moves without you having to add positions first.

Linear Gradient Generator

Stops

Stop 1

Position: 0%

Stop 2

Position: 100%

Angle

90°

CSS

background: linear-gradient(90deg, #3B82F6 0%, #EF4444 100%);

You Might Also Need

Conic Gradient Generator

Build conic gradients with center & angle

Gradient Overlay Generator

Layer a gradient over an image

Radial Gradient Generator

Build radial gradients with shape & position

Hard-Stop Gradient Generator

Build sharp hard-stop gradients

The linear gradient generator builds two-stop linear gradients with live angle control — drag the angle, set the colors, copy the CSS the browser will render.

What is Linear Gradient Generator?

The linear gradient generator takes the classic two-stop case and makes both of its decisions explicit: a colour field for each stop, and a single angle slider spanning the full 360 degrees.
A large live preview fills the panel above the controls, so the blend is judged as the browser paints it rather than in a separate swatch.
Underneath, one copy-ready line carries the exact linear-gradient declaration the preview is rendering — no translation step between the tool and the stylesheet.

Angle is the axis most tools treat carelessly, and this one does not: the slider talks degrees the way CSS does — 0deg pointing up, 90deg pointing right, clockwise throughout — so the number you set is the number the stylesheet needs. The preview updates continuously as the angle drags, which is how you find the direction a design actually wants: not by reasoning about vectors but by watching the blend sweep until it settles. Stop positions are fixed at the extremes for the pure two-color case — the hard-stop and multi-stop tools open up interior positioning when a gradient needs more architecture.

The workflow the tool is built for is the fast one: set two colors, sweep the angle, copy. It is the right instrument for the vast population of gradients that are exactly this — a button fill, a banner wash, a card background — and the wrong one for gradient work that needs three or more stops, radial geometry or conic sweeps; the specialized generators cover those. The gradient previewer accepts hand-written CSS for editing existing values, and the exporters go beyond CSS to SVG and canvas when the gradient must leave the browser.

The two-stop gradient is the workhorse of the family and the one most often done badly, usually by eye. Two problems recur. The first is banding: interpolation through sRGB can produce a dull, grey-brown middle on a saturated pair, which is the sign that the interpolation space should be a perceptual one — a nuance the preview makes visible and a hex guess never does. The second is angle, because the same pair at the same length reads as completely different lighting depending on whether the axis runs top to bottom or across the corner, and a few degrees of rotation often changes which end the eye reads as the light source. Trying three or four angles against real content, rather than the same swatch box, is what settles which one the composition actually wants.

As a css linear gradient maker it is the definition of scoped: a two color gradient tool with an angled gradient css output that is exactly honest — what the preview shows is what the copy produces, and nothing in between needs trusting.

Building the blend from the palette rather than from the picker is the habit worth keeping, because a two-stop gradient assembled from two existing values inherits the palette's relationships instead of introducing a pair that has to be justified later. Test it at the size it will render, too: a band that looks smooth in a thumbnail can band visibly across a full-width hero.

How to use Linear Gradient Generator

Set the start and end colors in the two fields.
Drag the angle slider until the direction reads right in the live preview.
Copy the CSS line — it is the exact declaration the preview is rendering.

When to use Linear Gradient Generator vs related tools

Use this for the classic two-stop linear gradient. Use the multi-stop builder for interior positioning, the radial and conic generators for other geometries, and the hard-stop generator when the blend should be a crisp boundary instead. When the degree value itself needs explaining, the gradient angle calculator spells the same angle in turns, radians and its nearest keyword; when a value already exists and you want to look at it without rebuilding it, the gradient previewer renders it.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.