Provide the starting value
Build linear, radial or conic gradients with ordered color stops, live previews and copyable CSS or Tailwind arbitrary-value output.
1. Controls
Configure type, direction, and color stops.
Angledeg
Color stops
%
%
%
%
Repeating gradient
Tile the gradient track infinitely.
2. Live preview
Checkerboard
Button
Card background
Gradient
Gradient textTip: switch the type tab above to compare linear, radial, and conic on the same stops.
3. Generated CSS
background: linear-gradient(135deg,
#3B82F6 0%,
#8B5CF6 33%,
#06B6D4 66%,
#F97316 100%
);What is a CSS gradient?
A CSS gradient is a smooth color transition rendered by the browser via the linear-gradient(), radial-gradient(), or conic-gradient() functions. It is used as a background or, with background-clip, as a fill for text and borders.
Linear vs radial vs conic — what is the difference?
Linear flows along a line at a chosen angle. Radial flows outward from a point in a circle or ellipse. Conic sweeps around a center point like a clock hand — useful for color wheels, donuts, and skeuomorphic dials.
What does the angle mean?
For linear gradients, 0deg points up, 90deg points right, 180deg points down, 270deg points left. The gradient flows in that direction. Use 135deg for a typical diagonal background.
What is a repeating gradient?
Repeating gradients tile the gradient track infinitely. Combine with tight stop positions to draw stripes, scanlines, or checkerboard-like patterns without an image.
Why are my Tailwind classes so long?
Tailwind arbitrary-value classes encode every color and stop in the class name. For complex gradients consider registering them as named utilities under theme.extend.backgroundImage in tailwind.config.js.
How do I make gradient text or borders?
For text: set background to the gradient, then bg-clip-text + text-transparent. For borders: use a gradient background on a wrapper and border-radius + padding to create a ring effect, or use the new mask-image trick.
Direct answer
Build linear, radial or conic gradients with ordered color stops, live previews and copyable CSS or Tailwind arbitrary-value output. The tool emits modern CSS without vendor prefixes. Gradient-wide text contrast can vary by position, so one preview does not prove readable text everywhere.
What this tool does
Build linear, radial or conic gradients with ordered color stops, live previews and copyable CSS or Tailwind arbitrary-value output. Prototype backgrounds, overlays and accents, then copy the exact generated declaration into a stylesheet.
Verified capabilities
Adjust the relevant controls
Stops are sorted by position before CSS is emitted. Linear angle, radial shape/position, conic origin and repeating mode are reflected directly in the generated function.
Check the accuracy boundary
The tool emits modern CSS without vendor prefixes. Gradient-wide text contrast can vary by position, so one preview does not prove readable text everywhere. Compare the result with the intended destination before reusing it.
When to use it
- Prototype backgrounds, overlays and accents, then copy the exact generated declaration into a stylesheet.
- Stops are sorted by position before CSS is emitted. Linear angle, radial shape/position, conic origin and repeating mode are reflected directly in the generated function. In “When to use it 2”, apply this specifically to CSS Gradient Generator.
- Prototype backgrounds, overlays and accents, then copy the exact generated declaration into a stylesheet. Use the first related tool to continue from the output of CSS Gradient Generator without changing locale.
How to use the tool
Provide the starting value
Build linear, radial or conic gradients with ordered color stops, live previews and copyable CSS or Tailwind arbitrary-value output. In “How to use the tool: Provide the starting value”, apply this specifically to CSS Gradient Generator.
Adjust the relevant controls
Stops are sorted by position before CSS is emitted. Linear angle, radial shape/position, conic origin and repeating mode are reflected directly in the generated function. In “How to use the tool: Adjust the relevant controls”, apply this specifically to CSS Gradient Generator.
Review and continue
Prototype backgrounds, overlays and accents, then copy the exact generated declaration into a stylesheet. In “How to use the tool: Review and continue”, apply this specifically to CSS Gradient Generator.
Check the accuracy boundary
The tool emits modern CSS without vendor prefixes. Gradient-wide text contrast can vary by position, so one preview does not prove readable text everywhere. Compare the result with the intended destination before reusing it. Review the stated limitation before treating the result as a production or accessibility decision.
Controls explained
Provide the starting value
Build linear, radial or conic gradients with ordered color stops, live previews and copyable CSS or Tailwind arbitrary-value output. In “Controls explained: Provide the starting value”, apply this specifically to CSS Gradient Generator.
Adjust the relevant controls
Stops are sorted by position before CSS is emitted. Linear angle, radial shape/position, conic origin and repeating mode are reflected directly in the generated function. In “Controls explained: Adjust the relevant controls”, apply this specifically to CSS Gradient Generator.
How the result is produced
Stops are sorted by position before CSS is emitted. Linear angle, radial shape/position, conic origin and repeating mode are reflected directly in the generated function. In “How the result is produced”, apply this specifically to CSS Gradient Generator.
Accuracy and limitations
- The tool emits modern CSS without vendor prefixes. Gradient-wide text contrast can vary by position, so one preview does not prove readable text everywhere.
- Clipboard, file decoding, download and permission-based controls follow the capabilities of the current browser.
Processing and privacy
The verified workflow runs in the browser. Files and color values stay in the page unless a control explicitly opens a network URL.
Practical tips
- Start from a known sample, then change one control at a time so the effect remains explainable.
- Review the stated limitation before treating the result as a production or accessibility decision.
Troubleshooting
The input or action does not work
Check the displayed range or file requirement, reset the tool, then retry with a smaller or browser-supported input. Permission-based controls may need a secure context.
Accuracy and limitations
The tool emits modern CSS without vendor prefixes. Gradient-wide text contrast can vary by position, so one preview does not prove readable text everywhere. In “Troubleshooting: Accuracy and limitations”, apply this specifically to CSS Gradient Generator.
Check the accuracy boundary
The tool emits modern CSS without vendor prefixes. Gradient-wide text contrast can vary by position, so one preview does not prove readable text everywhere. Reset the tool and retry with a known supported value before reporting an algorithm error.
Questions about this tool
What does CSS Gradient Generator do?
Build linear, radial or conic gradients with ordered color stops, live previews and copyable CSS or Tailwind arbitrary-value output. In “What does CSS Gradient Generator do?”, apply this specifically to CSS Gradient Generator.
What is the most important limitation?
The tool emits modern CSS without vendor prefixes. Gradient-wide text contrast can vary by position, so one preview does not prove readable text everywhere. In “What is the most important limitation?”, apply this specifically to CSS Gradient Generator.
Where is the data processed?
The verified workflow runs in the browser. Files and color values stay in the page unless a control explicitly opens a network URL. In “Where is the data processed?”, apply this specifically to CSS Gradient Generator.
What input should I prepare for CSS Gradient Generator?
Build linear, radial or conic gradients with ordered color stops, live previews and copyable CSS or Tailwind arbitrary-value output. Build linear, radial or conic gradients with ordered color stops, live previews and copyable CSS or Tailwind arbitrary-value output.
What should I verify before using the result from CSS Gradient Generator?
The tool emits modern CSS without vendor prefixes. Gradient-wide text contrast can vary by position, so one preview does not prove readable text everywhere. Compare the result with the intended destination before reusing it. In “What should I verify before using the result from CSS Gradient Generator?”, apply this specifically to CSS Gradient Generator.
Which workflow can follow CSS Gradient Generator?
Use the first related tool to continue from the output of CSS Gradient Generator without changing locale. Prototype backgrounds, overlays and accents, then copy the exact generated declaration into a stylesheet.
Continue your color workflow
Prototype backgrounds, overlays and accents, then copy the exact generated declaration into a stylesheet. In “Continue your color workflow”, apply this specifically to CSS Gradient Generator.
Continue with a related tool
Use the first related tool to continue from the output of CSS Gradient Generator without changing locale.
Color Palette Generator