ToolOrbit
Creator

CSS Gradient Generator

Design beautiful CSS gradients in seconds. Switch between linear and radial types, tweak the angle, add up to four color stops with precise positions, and watch a live preview update instantly. Copy production-ready CSS with one click.

Examples

Input
Linear, 90deg, blue to pink
Output
background: linear-gradient(90deg, #5b6cff 0%, #ff5b9e 100%);

How it works

Choose linear or radial, set two to four colour stops and the CSS updates with the preview. Each stop has a colour and a position from 0% to 100%; the stops are written in position order whatever order you added them in.

Linear gradient angles
AngleDirection
0degBottom to top
90degLeft to right
180degTop to bottom
270degRight to left

Radial gradients are always a circle starting from the centre; ellipses and off-centre positions are not offered. Colours are solid, without transparency, and conic or repeating gradients are not generated.

How to use CSS Gradient Generator

Choose a gradient type
Select linear or radial using the segmented control. Linear gradients add an angle slider.
Configure color stops
Adjust each stop's color and position, and use Add stop for up to four stops.
Copy the CSS
The live preview reflects your gradient. Click Copy to grab the background CSS.

Why use this tool

Live visual preview
Supports 2-4 color stops
Linear and radial gradients
One-click copyable CSS

Frequently asked questions

Between 2 and 4 stops, each with its own color and position.

Yes, switch the type to Radial for a centered circular gradient.

Found a bug or have an idea?

ToolOrbit is actively developed — feedback directly shapes what gets built next.

Send feedback