A CSS linear gradient is an image value that the browser renders from three ingredients: an angle that defines the direction of the gradient line, a list of color values, and ordered percentage stops that anchor each color along that line. The complete declaration looks like linear-gradient(135deg, #1e3a8a 0%, #38bdf8 50%, #fde68a 100%), and the preview you see in any generator reflects exactly what the browser will paint. Because every component is constrained by spec, you can move a declaration between a generator, a stylesheet, and a design tool without breaking it, as long as the angle, color values, and stops stay intact. This article explains each control in detail and walks through how to build, preview, and ship a clean three-color gradient using CSS Gradient Generator, a tool that keeps the angle, colors, stops, and preview in lockstep so the declaration you copy matches what you see.
Anatomy of a CSS Linear Gradient
A linear gradient is a member of the CSS <image> data type, described by the CSS Images Level 3 specification and the MDN gradient reference. The browser builds the image procedurally each time the element is painted, so the gradient scales cleanly to any element size without a raster export. Three controls determine what you get:
- The gradient angle, which selects the orientation of the gradient line through the element.
- The color stops, each consisting of a color value and a position along the gradient line.
- The order of those stops, which the browser uses to interpolate between colors.
Everything else, including the number of stops, the spacing, and the blending behavior, follows from these three controls. CSS Gradient Generator exposes exactly one angle, three colors, and three stops so the structure of the declaration is easy to audit later in a stylesheet. Every control is validated before the declaration is serialized, so the preview and the copied CSS share a single source of truth.
How Angles Map to the Gradient Line
CSS angles use degrees and follow a specific convention: 0deg points up, 90deg points right, 180deg points down, and 270deg points left. The angle describes the direction the gradient travels as the second color stop moves toward the first, so increasing degrees rotate the gradient clockwise when viewed on screen. A value of 360deg is treated as the boundary equivalent of 0deg, and intermediate values create diagonals.
| CSS angle | Direction | Typical use |
|---|---|---|
| 0deg | Bottom to top | Headers rising into a lighter band |
| 45deg | Bottom-left to top-right | Diagonal accents on cards |
| 90deg | Left to right | Sidebars, dividers, hero bands |
| 135deg | Top-left to bottom-right | Reverse diagonals for layering |
| 180deg | Top to bottom | Vertical hero sections |
| 270deg | Right to left | Mirrored horizontal flows |
The apparent diagonal is not fixed: it depends on the dimensions of the gradient box. The gradient line is resolved against the element's aspect ratio, so the same 45deg angle renders as a long, shallow diagonal on a wide banner and as a steeper diagonal on a tall column. If the diagonal looks wrong after pasting the declaration, the angle is usually the cause, not the color choice.
As a quick calculation, the CSS gradient line direction is the unit vector whose x-component equals sin(θ) and whose y-component equals -cos(θ), with the negative y because the on-screen Y axis grows downward. For a 45deg angle, that gives x = sin(45°) ≈ 0.7071 and y = -cos(45°) ≈ -0.7071, so the line runs from the bottom-left of the box toward the top-right, exactly the diagonal you expect.
Color Stops, Order Rules, and Hard Edges
Each color stop pairs a color value with a percentage position along the gradient line. The browser interpolates the visible color between adjacent stops, so the position of each stop directly controls where the blend begins and ends. Three rules keep the output predictable:
- Stops must appear in ascending percentage order. A stop at 30 percent must precede a stop at 60 percent.
- Equal adjacent stops are allowed and produce a hard transition instead of a smooth blend. Two stops at 50 percent with different colors create an instant edge.
- Descending stops are rejected with an explicit error rather than silently reordered, because an interactive design tool is a poor place for hidden fix-ups.
Percentages are clamped between 0 and 100, which is the range that covers the visible gradient line. CSS itself accepts positions outside this range for advanced effects, but those controls are intentionally outside the scope of CSS Gradient Generator so the output stays easy to read and test.
Every color is normalized to a six-digit hexadecimal value, such as #1e3a8a. The picker uses native color inputs, which makes selection predictable, and the validation logic rejects incomplete or ambiguous strings before they reach the declaration.
Build a Three-Color Gradient Step by Step
Open CSS Gradient Generator and work through the controls in the order shown below. The preview updates as each value changes, and the final declaration uses the same value the preview paints.
- Set the angle. Enter a value from 0 through 360. Pick 0 for an upward gradient, 90 for a left-to-right flow, or any intermediate value for a diagonal. If you are unsure, leave 180 for a top-to-bottom default and adjust once the colors look correct.
- Choose the three colors. Pick six-digit hex values for the start, middle, and end of the gradient. Native color inputs open the system picker; you can also paste a hex string if the brand color is already decided.
- Place the percentage stops in ascending order. Start at 0 percent for the first color, set the third at 100 percent for the last, and put the second stop somewhere between them. Equal adjacent stops are valid and produce a hard edge, while descending stops are rejected.
- Copy the declaration and test contrast. Copy the serialized CSS and paste it into your stylesheet or a sandbox. Place the real content over the gradient and verify that text and controls read clearly across the entire surface, not only at the sampled colors.
If you need a slightly different blend, slide the middle stop before adjusting the colors. Moving the middle stop changes where the transition feels strongest, while keeping the start and end colors stable.
Contrast, Fallbacks, and the Background Shorthand
A gradient can pass contrast at one point on the surface and fail at another, especially with three strong colors. Run a contrast check across the full band where text or icons appear, not at a single sampled color, before you treat the gradient as final. The tool does not calculate contrast, so the responsibility stays with the design review.
The declaration uses the background shorthand for convenient copying. That shorthand resets every other background subproperty on the element, so if the same component also needs a background color, image layers, position, or size, either integrate them carefully into the same shorthand or switch to background-image for the gradient. Mixing a single shorthand reset with a separate background-color rule is a common source of subtle visual regressions.
Provide a solid fallback color underneath the gradient for older environments that cannot render linear gradients, and consider an overlay or a two-color variant if the surface is busy. Gradients scale cleanly without raster images, but they are not free of design risk. Avoid conveying status solely through color, and verify themes, forced-color modes, printing, and screenshots before shipping.
Design Risks Worth Catching Before You Ship
Strong multi-color backgrounds can pull focus away from the controls layered on top of them. If the gradient is meant to support an interface rather than carry it, reduce the saturation of the middle stop or move it closer to one of the endpoints so the dominant surface reads as one color with a subtle shift. If a more sculptural look is needed, layered radial gradients can build mesh-style transitions; see how to replace a gradient mesh with stacked CSS radial layers for a related technique.
Browser color interpolation is not perceptually uniform by default, so the same three colors can look subtly different across browsers and operating systems. If brand accuracy or perceptual uniformity matters, test the output in the exact browsers your project supports and consider color-managed screenshots rather than trusting any single preview. The generator runs entirely in the current tab, so the preview and the declaration share one source of truth, but that source of truth is still bound by the browser's own interpolation behavior.
Finally, remember that gradients are images, not colors. Each browser paints them differently when system color modes, forced colors, or grayscale printing kick in. A solid fallback and a content review across at least two modes will catch the regressions that a generator preview cannot.
For a deeper look, see CSS Grid Generator API Alternative: Generate in Browser.