Quick answer: A Figma gradient can usually be recreated in CSS with linear-gradient(), radial-gradient() or conic-gradient(). Copy the gradient’s colors and stop positions from Figma, choose the matching CSS gradient type, then adjust the CSS direction or angle until the browser output matches the design.
Figma Gradient to CSS Example
If a design transitions from #6C63FF to #00C2FF, a basic CSS version can be:
background: linear-gradient(90deg, #6C63FF 0%, #00C2FF 100%);The two percentages are color-stop positions. A stop at 0% begins at one edge of the gradient line; 100% reaches the other edge.
Step 1: Identify the Gradient Type in Figma
- Linear: colors change along a straight line.
- Radial: colors spread outward from a center point.
- Angular: colors rotate around a center point; CSS commonly represents this with
conic-gradient(). - Diamond: does not have a direct one-property CSS equivalent in the same way; reproducing it may require a more customized technique.
Step 2: Copy the Colors and Stops
Open the Fill controls in Figma and inspect each gradient stop. Record the color, opacity and position. In CSS, multiple stops can be written in order:
background: linear-gradient(
90deg,
#ff6b6b 0%,
#ffd93d 45%,
#6bcb77 100%
);Step 3: Match the Direction
Figma and CSS do not always describe gradient direction in the same way, so copying an angle mechanically can produce a visually different result. Use the Figma gradient handle as the visual reference and adjust the CSS angle while comparing the rendered element with the design.
Linear Gradient CSS
.hero {
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
}You can also use direction keywords such as to right or to bottom when they describe the design clearly.
Radial Gradient CSS
.card {
background: radial-gradient(circle at center, #ffffff 0%, #dbeafe 100%);
}For off-center Figma gradients, change the CSS position after at, for example at 30% 40%.
Angular Gradient With CSS
.badge {
background: conic-gradient(from 45deg, #f43f5e, #8b5cf6, #06b6d4, #f43f5e);
}Use conic-gradient() when the color transition rotates around a center point. Adjust the starting angle and center position to match the Figma composition.
How to Handle Gradient Opacity
If a Figma stop has transparency, use a CSS color format with alpha, such as rgba(), hsla(), or modern color syntax with an alpha component. For example:
background: linear-gradient(
90deg,
rgba(124, 58, 237, 1) 0%,
rgba(124, 58, 237, 0) 100%
);Why the CSS Gradient May Look Different From Figma
- The CSS angle does not visually match the Figma handle.
- A color stop is at the wrong percentage.
- Opacity was omitted.
- The browser element has a different aspect ratio from the Figma layer.
- The design includes blending, effects or overlays in addition to the gradient.
- The Figma gradient type does not map directly to a single CSS gradient function.
Gradient Text Instead of a Gradient Background
If your goal is gradient-filled text, read our CSS gradient text guide. It explains the background-clip technique separately so this article can stay focused on converting Figma fills into CSS.
Frequently Asked Questions
Can Figma export a gradient as CSS?
Figma’s developer-oriented inspection features can expose CSS-like properties for many designs, but you should still verify the output against your actual component and codebase.
What CSS function matches a Figma linear gradient?
Use linear-gradient(), then reproduce the colors, stop positions and direction.
Why does the angle not match?
Design tools and CSS can represent gradient direction differently. Compare the rendered result visually rather than assuming the same numeric angle will always look identical.
Last reviewed: October 2026. Browser and Figma interfaces can change, so verify generated code in the browsers you support.
