Color Gradient Generator
Create stunning CSS gradients with multiple colors and directions. Generate linear and radial gradients with customizable color stops and angles.
Picker
Hex
Stops
About Color Gradient Generator
A Color Gradient Generator is a design tool that creates smooth color transitions between multiple colors, producing CSS-ready linear and radial gradients. This tool allows you to customize the linear angle, color stops, stop positions and per-stop opacity to create stunning visual effects for web design and digital graphics.
Why use a Color Gradient Generator?
Using a Gradient Generator simplifies the process of creating complex color transitions and eliminates the need to manually write CSS gradient code. It provides visual feedback as you design, ensuring you get the exact gradient effect you want while generating clean CSS code (optionally with a -webkit- line) that you can directly implement in your projects.
Who is it for?
This tool is essential for web developers creating modern UI designs, CSS developers implementing visual effects, UI/UX designers exploring color transitions, graphic designers working on digital backgrounds, and anyone who needs to create professional gradient effects without writing complex CSS code manually.
How to use the tool
Choose between linear or radial gradient types
Add colors to your gradient by clicking on the gradient bar, then edit each stop with the picker, HEX field or RGBA inputs
For linear gradients, set the angle with the number field or the direction buttons (radial gradients are always circular and centred)
Fine-tune color stop positions by dragging them along the gradient bar or typing a position in the Stops list
Copy the generated CSS code and paste it into your stylesheets or design tools
Frequently Asked Questions
How do I create a CSS gradient?
Choose gradient type (linear or radial), pick two or more colour stops with positions, set the linear angle, and the tool generates the matching CSS code. Copy it with the Copy to clipboard button and paste it into your stylesheet. The output is a fallback `background: #hex;` line followed by the `background: linear-gradient(...)` line, with every stop written as `rgba()`. The preview shows the gradient as you adjust. Generation runs entirely in your browser — your colour values never leave the device.
What's the difference between linear, radial, and conic gradients?
Linear gradient: colours blend along a straight line (typically top-to-bottom, left-to-right, or any angle). Most common — used for headers, button backgrounds, hero sections. Radial gradient: colours blend outward from a centre point (typically circular or elliptical). Used for spotlight effects, light glows, focal points. Conic gradient: colours blend around a centre point (like a pie chart). Used for pie charts, progress circles, decorative effects. All three are native CSS — no images needed. This tool generates linear and radial (circle, centred) gradients only; it does not generate conic gradients.
How do I copy the CSS code?
Click Copy to clipboard under the generated CSS. The result is a `background:` declaration ready to paste, preceded by a solid-colour fallback line: `background: #ff5733;` then `background: linear-gradient(135deg, rgba(255, 87, 51, 1.00) 0%, rgba(199, 0, 57, 1.00) 100%);`. For Tailwind users: use arbitrary values such as `bg-[linear-gradient(135deg,#ff5733,#c70039)]`. For Sass / CSS-in-JS, paste into your stylesheet or styled-component.
Can I use more than 2 colour stops?
Yes — add a stop by clicking an empty spot on the gradient bar (there is no Add Stop button; the new stop starts white and you can then change it). Each stop has a colour, an opacity and a position (0-100%) along the gradient. Remove a stop with the × in the Stops list (two stops minimum). Multi-stop gradients enable complex effects: tri-tone backgrounds, photographic-like blends, rainbow effects. CSS supports unlimited stops, though more than 5-6 often looks busy. For smooth blends between many colours, evenly distribute the stops; for hard colour transitions, place stops close together at the boundary.
What's a 'colour stop position'?
Each colour in a gradient has a position — where along the gradient line that colour reaches full opacity. Default for a 2-stop gradient: 0% and 100% (the colours fade smoothly between them). Custom positions create non-linear effects: `linear-gradient(red 0%, red 50%, blue 50%, blue 100%)` produces a hard-edge half-red, half-blue stripe (no fade). For smooth blends with weighted distribution, use positions like 0%, 30%, 70%, 100%.
How do I control the angle / direction?
For linear gradients, type an angle in degrees in the number field or click one of the eight direction buttons (0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°); keywords such as `to right` are not generated. `0deg` is bottom-to-top; `90deg` is left-to-right; `180deg` is top-to-bottom; `270deg` is right-to-left. Radial gradients are always `circle` from the centre — this tool has no shape, size or origin controls, so edit the CSS by hand if you need those. The preview updates as you adjust.
Can I add transparency to gradient stops?
Yes — each stop has an A (alpha) input from 0 to 100%, and the output writes every stop as `rgba()`. Example: `linear-gradient(rgba(255, 87, 51, 1), rgba(255, 87, 51, 0))` fades a colour from opaque to transparent, useful for image overlays and fade effects. Combining with `mix-blend-mode` or `backdrop-filter` enables sophisticated layering effects.
Why does my gradient look banded / striped?
Banding is a rendering artifact where the gradient shows visible stripes instead of smooth transitions — caused by limited colour depth (8-bit per channel = 256 values, which can be insufficient for very gradual transitions). Fixes: (1) add slight noise/dithering via CSS filters or a noise texture overlay. (2) Use shorter gradient distances (smaller elements show banding less). (3) Use modern wide-gamut colour spaces (CSS Color 4 `oklch()` stops) on browsers that support them. (4) Avoid near-identical end-stop colours that exaggerate banding.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.