Gradient CSS Generator
Create a two-color CSS gradient and copy the code instantly.
This tool runs entirely in your browser. Your files are never uploaded to a server.
background: linear-gradient(90deg, #3b82f6, #a855f7);
What this tool does
Builds a CSS linear-gradient() background from two colors and an angle you choose, showing a live preview and the ready-to-use CSS code.
How to use it
Pick Color A and Color B with the color inputs, and set the angle in degrees. The gradient preview and the CSS code below it update immediately as you change any value; click the copy icon to copy the CSS.
Worked example
With the defaults of #3b82f6 (blue), #a855f7 (purple), and a 90° angle, the tool produces background: linear-gradient(90deg, #3b82f6, #a855f7); — a gradient that transitions left-to-right, since 90deg points the gradient line toward the right in CSS's angle system.
How gradient angles work
In CSS, 0deg points the gradient from bottom to top, and the angle increases clockwise, so 90deg goes left-to-right, 180deg goes top-to-bottom, and 270deg goes right-to-left. This differs from a compass or standard math angle convention, which is a common source of confusion when writing gradients by hand.
Limitations
This generates a simple two-color linear gradient only — it doesn't support radial or conic gradients, more than two color stops, or custom stop positions, like placing a color at 20% instead of splitting evenly. For gradients beyond this, copy the generated CSS as a starting point and edit the linear-gradient() function by hand to add more stops.
Scope, sources and privacy
The CSS linear-gradient() function is part of the CSS Images specification and is supported by all modern browsers. The gradient is computed and rendered entirely in your browser; the colors you choose are never uploaded.
Frequently Asked Questions
- What gradient types does this support?
- Currently linear gradients with an adjustable angle — the most common type used for backgrounds, buttons and hero sections.
- Can I use more than two colors?
- This tool supports two colors for a clean, simple gradient — you can manually extend the generated CSS with more color stops if needed.
- Does this work in all browsers?
- Yes, the CSS linear-gradient() function is supported by all modern browsers.