What is a Gradient Generator?
A CSS gradient is a smooth blend between two or more colours, drawn as a background image rather than an image file. A gradient generator lets you place the colour stops, set the direction and copy the resulting background-image declaration instead of hand-writing percentages and guessing at the result.
This one builds all three CSS gradient functions. linear-gradient paints along a straight line whose direction is given in degrees. radial-gradient paints outwards from a centre point. conic-gradient sweeps around that centre like the hand of a clock, which is what produces colour wheels and pie-chart rings. Every gradient can carry up to six stops, each with its own colour and position from 0% to 100%.
The angle convention catches people out: 0 degrees points up, not right, and angles increase clockwise, so "to right" is 90 degrees and "to bottom right" is 135. The preview above updates on every keystroke, and both the raw CSS and the equivalent Tailwind arbitrary value are one click away.
How to make a CSS gradient
- Pick the gradient type: Linear for banners, buttons and page backgrounds, Radial for vignettes and spotlights, Conic for colour wheels and rings.
- Drag the angle slider. Linear gradients read left-to-right at 90 degrees, top-to-bottom at 180; conic gradients use it as the sweep's starting angle.
- Set each colour with the picker or by typing a hex value such as #0ea5e9, then drag its position slider to decide where it sits in the blend.
- Add stops up to the limit, or remove the ones you do not need. Put two stops at the same percentage when you want a hard edge rather than a blend.
- Copy the CSS into your stylesheet as background-image, or copy the Tailwind arbitrary value straight into a className. The Randomise button is there for exploring palettes you would not have tried.
Gradient Generator limits and rules
| Item | Limit |
|---|---|
| Angle convention | 0 degrees points up and angles run clockwise, so `to right` is 90deg and `to bottom` is 180deg |
| Default interpolation | sRGB — midpoints can look muddy; linear-gradient(in oklab, ...) avoids that in Chrome 111+, Safari 16.2+ and Firefox 113+ |
| The transparent keyword | transparent is rgba(0, 0, 0, 0), so white-to-transparent fades through grey — use #ffffff00 instead |
| Hard edges | Two stops at the same position make a sharp transition rather than a blend |
| Stops on this page | Two to six; the CSS spec itself puts no limit on the number of stops |
| Tailwind arbitrary values | Spaces must be written as underscores: bg-[linear-gradient(90deg,#f97316_0%,#db2777_100%)] |
| Conic support | Chrome 69+, Safari 12.1+, Firefox 83+ — check for older embedded browsers |
| Animating gradients | Not possible between two gradients; cross-fade two stacked layers, or register custom properties with @property |
When to use it
- Backgrounds for hero sections and section dividers, where a gradient is one line of CSS instead of a 200 KB image that still needs a retina variant.
- Buttons and cards that need a hover state — swapping the angle or lightening a stop is a smaller change than maintaining two images.
- Placeholder and skeleton screens, where an animated shimmer is a gradient slid behind a mask.
- Text and icon accents using background-clip: text, which needs a gradient behind it rather than a solid colour.
- Colour wheels, progress rings and chart segments with conic-gradient, which replaced the SVG hacks that used to be necessary.
Is it private?
Everything runs inside your browser. Your text and files are never uploaded, never stored and never seen by anyone else — including me. You can use the tool with the network tab open and watch no request leave the page. Closing the tab erases the input.
Frequently asked questions
90 degrees. The angle is measured clockwise from the upwards direction, so 0deg goes to the top, 90deg to the right, 180deg to the bottom and 270deg to the left. The named directions and the degree values produce identical output.
Because transparent is defined as rgba(0, 0, 0, 0) — a fully transparent black. Blending your colour towards it passes through grey rather than becoming fainter. Use a transparent version of the same colour instead: #ff0000 to #ff000000.
Copy the Tailwind arbitrary value, which is the gradient function with spaces replaced by underscores — bg-[conic-gradient(from_0deg_at_50%_50%,#f43f5e_0%,#facc15_33%,#22d3ee_66%,#f43f5e_100%)]. Free titling or hyphenating the value will break the class, so paste it as generated.
Not by interpolating one gradient into another — background-image is not an animatable property in that sense. The two workable approaches are stacking two gradient layers and animating the opacity of the top one, or registering the colour as a custom property with @property so the browser knows it can interpolate it.
They are cheap to send but not always cheap to paint. A full-viewport gradient with many stops is repainted on scroll in some browsers, and a large radial gradient can be slower than a small tiled background image. Keep the stop count sensible and avoid animating background-position on large elements.
Related tools
Written and maintained by Md. Nur Hossain Repon.