A CSS linear-gradient declaration blends three colors along a straight line whose direction is set by an angle from 0 through 360 degrees, with each color anchored to an explicit percentage stop on the gradient line. When that declaration is pasted into Figma's fill panel, the exact angle, three six-digit hexadecimal colors, and ordered stops are applied to the selected layer, so what the preview tile shows is what Figma renders on the canvas. The CSS Gradient Generator validates every input — the angle, three hex colors, and ascending percentage stops — before serializing a single background shorthand, so the preview and the copied declaration share one source of truth. That tight coupling is the reason designers building pixel-accurate parity between a Figma file and a production stylesheet usually construct the gradient in CSS first, then carry the validated string into the canvas. It also means the workflow is built around paste, not transcription.
Figma's built-in gradient editor is convenient for exploration, but its controls drift quickly: dragging a stop on the canvas can shift the middle color's position in ways that are hard to audit after the fact, and there is no way to lock angle, colors, and stops into a transferable, copyable form. Designers who need exact parity between a Figma file and a stylesheet usually work the other direction — they build the gradient in CSS first, then paste the declaration into Figma so the canvas stays in sync with the code.
Linear Gradient in Figma — Where CSS Fits In
Figma parses a CSS linear-gradient string as a valid fill input, which makes a validated declaration directly portable into a frame, rectangle, or component. The flow for applying one is short and concrete:
- Select the layer on the Figma canvas that should receive the gradient.
- In the right-hand Properties panel, open the Fill section and click the active color swatch to open the color picker.
- Switch the color picker into the mode that accepts a raw CSS string (Figma exposes this through the color input's text field or a dedicated CSS entry).
- Paste the copied background: linear-gradient(...); declaration into the field and confirm.
- Resize the layer to match the gradient box the angle was designed against, since the apparent diagonal changes with aspect ratio.
Once the declaration is in place, Figma reads the angle, three hex values, and percentage stops, and renders the same gradient that appeared in the preview. From there the fill can be converted into Figma's native gradient stops for further visual editing, or left as the raw CSS string to preserve parity with the stylesheet.
Why Build the Gradient in CSS First
The CSS Gradient Generator does three jobs that Figma's native editor does not. It validates inputs in one pass: a 0–360 degree angle, three six-digit hex values, and percentage stops in ascending order, all rejected with a visible message if any rule is broken. It returns a single source of truth: the preview tile and the copied declaration are generated from the same serialized string, so what you see is what the stylesheet receives. It keeps the declaration auditable: every stop is explicit, and equal adjacent stops are allowed and create a hard transition, which makes a hard edge obvious in code review.
None of this requires uploading the design or signing in. The values never leave the current browser tab, which makes it practical to iterate against a live stylesheet, copy the result, and paste it straight into Figma without worrying about drift between the canvas and the code. The trade-off is intentional: the tool produces one linear layer with three stops, and omits radial, conic, repeating, alpha, and interpolation-space controls so the output stays readable and testable.
Build the Gradient in Four Steps
- Set an angle from 0 through 360 degrees. Use 0 for an upward gradient, 90 for rightward, 180 for downward, and 270 for leftward; 360 is accepted as the boundary equivalent of 0.
- Choose three six-digit hexadecimal colors, for example #0F172A, #6366F1, and #F472B6. Native color inputs keep selection predictable, and validation rejects incomplete or ambiguous strings before they reach the declaration.
- Place the three percentage stops in ascending order, such as 0%, 50%, and 100%. Equal adjacent values create a hard transition; descending values are rejected so design intent stays explicit.
- Copy the declaration and test content contrast across the full gradient surface, not at a single sampled point, before pasting the value into Figma.
For a typical hero banner, a useful starting configuration is a 135-degree diagonal with stops at 0%, 50%, and 100%. That spreads the blend evenly across the gradient line and gives the middle stop room to move without collapsing the transition. Once the preview reads correctly, the copied declaration is ready to paste.
Reading CSS Angles and Why the Diagonal Shifts
CSS gradient angles follow a fixed compass, defined in the W3C CSS Images Level 3 specification. Zero degrees points upward toward the top of the gradient box, 90 degrees points right, 180 points down, and 270 points left. A 360-degree value is treated as the boundary equivalent of zero. Intermediate angles create diagonals, but the apparent slope of a diagonal depends on the dimensions of the gradient box, because the angle is resolved against the box rather than against the viewport.
| Angle (deg) | Direction | Typical use |
|---|---|---|
| 0 | Bottom to top | Subtle highlight overlays, rising backgrounds |
| 90 | Left to right | Horizontal banners, progress-style fills |
| 180 | Top to bottom | Default page backgrounds, vertical washes |
| 270 | Right to left | Mirrored hero bands, fade-in accents |
| 135 | Top-left to bottom-right | Diagonal banners, dynamic covers |
| 45 | Bottom-left to top-right | Light-source effects, diagonal split panels |
This is why the same angle can look correct on a 1920×600 banner and wrong on a 600×600 square. The gradient line is computed against the element's own box, so the diagonal stretches or compresses to match the new aspect ratio. When the gradient is going to live inside a Figma frame that will be resized for different breakpoints, the angle should be tested at the production width, the production height, and any constrained mobile dimensions rather than committed at a single size.
Color Stops, Equality, and What "Ascending" Means
A color stop is the position along the gradient line where a chosen color is anchored. The CSS Gradient Generator uses percentage positions only, with all three stops required to fall between 0 and 100 and to appear in ascending order. A starting configuration of 0%, 50%, and 100% places the first color at the start of the line, the middle color exactly at the center, and the third color at the end. Moving the middle stop closer to either edge shifts the strongest part of the blend toward that edge; moving it toward 50% balances the transition.
Equal adjacent stops are intentionally allowed. Two stops at the same percentage with different colors produce a hard transition — a visible seam — rather than a smooth blend. This is useful for banded effects, two-tone panels, or striped compositions where the design calls for a sharp boundary. Descending stops, on the other hand, are rejected by the generator instead of being silently corrected by the browser's CSS fix-up algorithm. The error is surfaced because an explicit message is easier to debug than a value the browser quietly rewrote.
Every color is normalized to a six-digit hexadecimal string before serialization, so the declaration contains no shorthand forms, no rgb() calls, and no named colors. That keeps the CSS predictable to read and easy to audit when the declaration moves into a shared stylesheet or gets reviewed alongside the Figma file.
Contrast, Fallbacks, and Composition Risks
A gradient is an image, and every part of that image has its own contrast against any text or control placed on top of it. A headline that passes WCAG contrast at the brightest point of the gradient may fail at the darkest, and a button that sits on the middle stop may sit on a different ratio on smaller screens. The generator does not calculate contrast, so contrast has to be tested across the full surface — every region where copy or interactive elements will appear — before the gradient ships. The MDN gradient data type reference is a useful place to confirm browser-specific behavior when the same declaration has to render in older engines.
Strong multi-color backgrounds also compete with foreground content. When a gradient is meant to sit behind a busy interface, a subtler two-color variant, a low-opacity overlay, or a solid fallback color often reads better than a vivid three-color blend. Status should never be conveyed through color alone, and themes, forced-color modes, printing, and screenshots can each shift how the gradient appears in production. Designers reviewing a Figma file should also export the gradient at the actual frame dimensions to confirm the perceived midpoint matches the browser rendering.
Finally, the generator emits the declaration as a background shorthand. If an existing component already sets a background color, background image, position, or size, the shorthand will reset those subproperties. In that case, switch the pasted value from background to background-image so the gradient layers cleanly without disturbing the rest of the background stack.
Pasting the Declaration Into Figma and Auditing the Result
Once the four input values — angle, three hex colors, ascending stops — are set, the generator returns a single background: linear-gradient(...); line. Paste that line into Figma's fill input, confirm the layer dimensions match the gradient box the angle was tuned against, and visually check that the canvas matches the preview tile. If a designer on the team needs to keep editing in Figma's native gradient editor, convert the fill to Figma's local stop representation at that point. If the design has to stay in lockstep with the stylesheet, leave the fill as the raw CSS string so any future code change can be mirrored back into Figma without re-picking colors or re-measuring stops.
For layered or repeating gradients, the generator's scope is intentionally narrow: it produces one linear layer with three stops. Additional gradients can be stacked with commas once the base value is in the stylesheet, and related techniques such as repeating-linear-gradient for stripe patterns can extend the result without leaving the CSS spec. The boundary is the same in Figma as it is in the browser: the gradient is an image, the image has dimensions, and the dimensions decide what every angle looks like.