A CSS linear gradient is an image the browser paints from a line of interpolated colors, defined with the linear-gradient() function inside a background declaration. To make a CSS gradient background, set an angle between 0 and 360 degrees, pick three six-digit hex colors, and anchor each color with a percentage stop in ascending order from 0% to 100%. The browser then renders a smooth transition between those anchors along the gradient line. Because the image is generated rather than loaded, gradients scale cleanly across screen sizes and never produce the aliasing artifacts you get from a raster background. The CSS Gradient Generator handles the syntax, validates the angle, colors, and stop order, and returns one ready-to-paste declaration you can drop into any stylesheet without repeated edits in browser developer tools.
Inside the Linear Gradient Function
A CSS linear gradient is a value of the gradient data type that the browser resolves to a paint server image, not a downloadable asset. Per the W3C CSS Images Level 3 specification, the first argument of linear-gradient() defines the direction of the gradient line and the remaining arguments define colors at positions along that line. That makes gradients a function of two things: an angle and a list of color stops. There is no separate raster step, no image file, and no HTTP request. You write the function inside a background or background-image declaration and the browser paints the transition on demand.
The gradient line is anchored to the gradient box, which by default is the element's padding box. When you change the width or height of the element, the gradient line stretches with it, and the angle you specified is reinterpreted against the new dimensions. That is why the same gradient can look horizontal on a wide banner and visibly diagonal on a tall sidebar. The CSS Gradient Generator builds the declaration from your inputs and uses the exact same value for both the preview and the copied CSS, so the displayed result and the code you paste share one source of truth.
The Inputs the Generator Validates
The CSS Gradient Generator only accepts a tightly defined set of inputs. The angle is constrained to integers from 0 through 360 degrees, where 360 is treated as the boundary equivalent of 0. Each color must be a six-digit hexadecimal value such as #1a2b3c, normalized to that form so the resulting declaration is unambiguous. Every stop must be a percentage between 0 and 100, and the three stops must appear in strictly ascending order.
Equal adjacent stops are allowed and produce a hard transition between two colors at the same position, which is useful when you want a band rather than a blend. Descending stops are explicitly rejected instead of relying on the CSS fix-up algorithm, because an explicit error is easier to read while you are designing interactively. The percentages are kept within the visible gradient line, so advanced behavior like stops outside the 0–100 range is intentionally outside the tool's controls. Every input the tool exposes is validated before serialization, which is why the preview never drifts from the copied code.
Build the Gradient in Order
The CSS Gradient Generator walks you through four ordered steps. Each step has a single, well-defined outcome, and you can stop and copy the CSS once the inputs satisfy the validator.
- Set an angle from 0 through 360 degrees. Pick a starting direction using the conventional compass: 0 for up, 90 for right, 180 for down, 270 for left, or any diagonal value in between. Treat 360 as the boundary equivalent of 0. Adjust the angle after the component is on the page, because the apparent diagonal depends on the element's aspect ratio.
- Choose three six-digit colors. Pick a starting color, a middle anchor, and an ending color. Type each color as a six-digit hex value such as #1a2b3c. Native color inputs make selection predictable, and the tool rejects incomplete or ambiguous strings before they reach the declaration.
- Place the three percentage stops in ascending order. Start with the canonical 0%, 50%, and 100% triplet, then move the middle stop earlier or later than 50% to control where the blend changes most strongly. Equal adjacent stops create a hard transition; descending stops are rejected to keep design intent explicit.
- Copy the declaration and test content contrast across the full gradient. Use the preview as the single source of truth, since it shares the exact serialized value with the copied CSS. Paste the declaration into the target stylesheet, render the component at its real dimensions, and verify text and control contrast at multiple points on the surface.
How Angles Map Onto the Gradient Box
In CSS, the gradient line direction is defined by an angle that follows a simple convention. Zero degrees points upward, 90 degrees points to the right, 180 degrees points downward, and 270 degrees points to the left. The CSS spec also accepts 360 as a boundary value equivalent to 0, so the CSS Gradient Generator treats the 0–360 range as a continuous circle. Any value in between produces a diagonal whose apparent direction depends on the aspect ratio of the gradient box.
A gradient set to 45 degrees on a square element looks like a true corner-to-corner diagonal. The same gradient set to 45 degrees on a wide banner looks shallower, because the gradient line is resolved against the wider box. The MDN gradient reference documents this behavior in detail, including the fact that an angle of 0deg corresponds to a "to top" gradient while 90deg corresponds to "to right". When you change the dimensions of the element that holds the background, plan to revisit the value rather than assume the visual will be preserved.
| Angle | Gradient direction | Notes |
|---|---|---|
| 0deg | Points upward | Default "to top" direction |
| 90deg | Points right | Default "to right" direction |
| 180deg | Points downward | Default "to bottom" direction |
| 270deg | Points left | Default "to left" direction |
| 360deg | Boundary, equivalent to 0 | Safely accepted for wrap-around inputs |
Stop Order, Hard Transitions, and Rejection
Color stops are the percentages that anchor each selected color along the gradient line. The CSS Gradient Generator accepts three stops between 0 and 100, ordered from smallest to largest. A common starting point is 0%, 50%, and 100%, which gives an even three-band blend with the middle color as the visual midpoint. Moving the middle stop earlier than 50% pushes the strongest blend toward the start of the line; moving it later pushes the blend toward the end.
Equal adjacent stops are a deliberate feature, not a bug. Setting two stops to the same percentage creates a hard edge between the colors on either side of that anchor, which is useful for stripes, dividers, and banded headers. Descending stops are rejected by the tool instead of being silently reordered, because an explicit error message is more useful than a quietly corrected declaration when you are iterating on a design. The same value that drives the preview is the value that gets serialized, so what you see is exactly what the browser will render.
Test Contrast, Fallbacks, and Theming
Gradients are not free of design risks, and the CSS Gradient Generator intentionally does not calculate contrast for you. Contrast can pass at one point on the surface and fail at another, so test every area where text or controls appear rather than sampling a single color. Strong multi-color backgrounds can also distract from foreground controls, so consider a subtle two-color variant, a translucent overlay, or a solid fallback before shipping.
Avoid conveying status solely through color, and verify how the gradient behaves under forced-color modes, in print stylesheets, and in screenshots. Because gradients replace decorative raster images, they scale cleanly across devices, but a solid background-color fallback should be defined first so older browsers or stripped-down contexts have something to paint. The generator runs entirely in the current browser tab, so values are not uploaded, saved, or tied to an account, and no dependency is added to the project.
Paste the Declaration Into Existing CSS
The declaration returned by the CSS Gradient Generator uses the background shorthand for convenient pasting. That shorthand can reset other background subproperties on the same element, so if the component also needs a background-color, a layered background-image, a background-position, or a background-size, integrate the gradient carefully. Switching the declaration to background-image keeps the gradient isolated from the rest of the background stack and is usually the safer choice when you are adding a gradient to an existing rule.
Multiple gradients can be layered by separating them with commas, but the generator produces one linear layer per declaration. If you need stacked gradients, build each one separately and combine the values manually. Once the gradient is in place, copy the CSS only after testing real content, responsive sizes, contrast across the full surface, and the fallbacks required by your supported environments.
For a deeper look, see CSS Grid Generator Bulk: Skip Repetitive Track Lists.
For a deeper look, see CSS Loader Generator: Command Line vs Online Workflow.