A CSS linear gradient is defined by a direction in degrees, three six-digit hexadecimal colors, and percentage color stops that must appear in ascending order. To get a linear gradient out of Figma into CSS, you read the angle, the three hex colors, and each stop position from the Figma fill panel, then enter those exact inputs into the CSS Gradient Generator so the preview and the copied declaration stay in sync. The generator validates the angle as a value between 0 and 360, normalizes every color to six-digit hex, and rejects descending stops instead of silently rearranging them, so the CSS you paste into a stylesheet reflects the design intent you recorded. Because the preview uses the exact linear-gradient value that gets copied, what you see is what ships, and the same source of truth remains easy to audit after the declaration moves into production. Start with stops at 0, 50, and 100 percent, adjust the angle for the target box aspect ratio, then move the middle stop to control where the blend changes most strongly.
Reading the Linear Gradient Values From Figma
Figma stores a linear gradient as an angle plus a list of color stops. Each stop carries a hex color and a position between 0 and 100 percent. Reading those inputs is the first half of moving the gradient out of the design file, and the values map cleanly to the four inputs the CSS Gradient Generator expects.
- Select the layer that holds the linear gradient fill.
- Open the fill panel and confirm the type is Linear Gradient.
- Note the angle in degrees shown next to the gradient bar.
- Click each color stop on the gradient bar and copy the hex value from the color picker.
- Note each stop's position percentage, which Figma displays next to the stop handle.
In Figma, an angle of 0 points toward the top of the frame, 90 points right, 180 points down, and 270 points left, with intermediate angles producing diagonals. The CSS specification uses the same convention, so the angle you read in Figma can be entered directly without conversion. Figma stops are shown as 0 to 100 values, which align with CSS percentage stops, so no scaling is needed there either. If a design elsewhere uses a different convention, check the CSS specification definition of linear gradients before adjusting the value.
Setting Up the CSS Gradient Generator
The CSS Gradient Generator accepts one angle, three six-digit hex colors, and three percentage stops. Once those inputs match the Figma layer, the preview and the copied declaration are guaranteed to match because both are produced from the same serialized value.
- Set the angle from 0 through 360 degrees, using the value shown in the Figma fill panel.
- Choose the first color as a six-digit hex value, such as #2563EB.
- Choose the second color as a six-digit hex value.
- Choose the third color as a six-digit hex value.
- Place the first stop at 0 percent.
- Place the second stop at or above the first, between 0 and 100 percent inclusive.
- Place the third stop at or above the second and at or below 100 percent.
- Read the preview to confirm the gradient matches the Figma layer.
- Copy the declaration and paste it into the target stylesheet.
If the stops are entered out of order, the generator rejects the input rather than rearranging the values, so the design intent stays explicit in the controls. Equal adjacent stops are allowed and create a hard transition between the two colors at that boundary, which is useful for banded effects.
How the Linear Gradient Syntax Is Built
The declaration takes the form of background: linear-gradient(angledeg, color1 stop1%, color2 stop2%, color3 stop3%);
A CSS linear gradient is an image generated by the browser. The first argument sets the direction of the gradient line; the remaining arguments set colors at positions along that line. Angles use CSS degrees, where 0 points up, 90 points right, 180 points down, and 270 points left, with 360 accepted as the boundary equivalent of 0. Intermediate values create diagonals, and the apparent diagonal depends on the dimensions of the gradient box, which is why the same angle can look different on another element.
Color stops anchor each chosen color at a position on the gradient line. The generator uses percentage positions and requires them to be in ascending order. Percentages stay within 0 and 100, which covers the visible portion of the gradient line. CSS can represent stops outside this range, but that advanced behavior is intentionally outside the focused controls. Every color is normalized to a six-digit hexadecimal value, so the controls and the final declaration never disagree on the format.
Cardinal Angle Directions
| CSS Degrees | Direction | Typical Use |
|---|---|---|
| 0 | Up | Vertical fade from bottom to top |
| 90 | Right | Horizontal fade from left to right |
| 180 | Down | Vertical fade from top to bottom |
| 270 | Left | Horizontal fade from right to left |
| 45 | Top-right diagonal | Banner headers, hero sections |
| 135 | Bottom-right diagonal | Card accents, button backgrounds |
The table lists the four cardinal directions plus two common diagonals as defined by the CSS specification. The apparent diagonal on a non-square element depends on the gradient box dimensions, so always test the result on the actual component, not on a square preview.
Testing the Gradient in Real Content
The preview shows the gradient exactly as the browser will render it, but a gradient that looks good in isolation can fail when real content sits on top of it. Text placed over a gradient may pass contrast at one point and fail at another. Test the entire text area, not a single sampled color. The CSS Gradient Generator does not calculate contrast for you, so the contrast check has to happen in the actual stylesheet against the actual content.
Strong multi-color backgrounds can distract from controls and reduce hierarchy. If a section needs to host dense content, consider a subtle two-color variant, an overlay, or a solid fallback. Avoid conveying status solely through color, and verify themes, forced-color modes, printing, and screenshots before shipping.
The declaration uses the background shorthand for convenient copying. If an existing component also needs background-color, image layers, position, or size, integrate the gradient carefully or switch to background-image so the shorthand does not reset other background subproperties. Multiple gradients can be layered with commas, but the generator produces one linear layer at a time. It intentionally omits radial, conic, repeating, transparency-alpha, and interpolation-space controls to keep the output readable and testable.
Adjusting the Gradient Without Breaking It
A stable base is stops at 0, 50, and 100 percent. With those positions set, three things are easy to change without re-deriving the whole gradient.
- Move the middle stop to shift where the blend changes most strongly. A middle stop near 0 or 100 pushes the second color to one edge; a middle stop at 50 spreads the blend evenly between the two outer colors.
- Change the angle to match the component's aspect ratio. A diagonal on a square box becomes a flatter or steeper diagonal on a wide or tall box, because the gradient line is resolved against the gradient box dimensions.
- Swap one color at a time, keeping the other two stops in place. This keeps the transition structure auditable after the declaration moves into a stylesheet.
The browser handles color interpolation in its default color space, which can shift the midpoint slightly compared to the Figma preview. The generator does not interpolate in a custom color space. If brand accuracy or perceptual uniformity is critical, test the output in the exact browser support and color requirements of the project.
Working From a Figma Reference
When the Figma gradient includes more than three stops, pick the three that define the dominant color shifts and treat the others as accents to fold in later. The Figma stops read from the gradient bar already use 0 to 100 positions, so the inputs into the generator do not need scaling. For a layer-by-layer walkthrough of reading the angle and stop values from Figma, the Figma linear gradient guide covers the same controls in more detail.
Everything runs locally in the current tab. Values are not uploaded or saved, no account is required, and no dependency is added. Once the angle, three hex colors, and ordered stops match the values read from Figma, the copied CSS declaration is ready to paste into any stylesheet and renders the same gradient in the browser.