How this CSS gradient generator works
A CSS gradient is a smooth blend between two or more colors, generated by the browser as an image you can drop into any background. This tool builds the gradient function for you: choose a type, set a direction, add your color stops, and the matching CSS appears instantly while the preview box fills with the result.
A linear gradient blends colors along a straight line set by an angle — 0deg points up, 90deg points right, 180deg points down. A radial gradient radiates outward from the center, ignoring the angle. Each color stop can carry an optional position percentage that pins it to a point along the gradient, letting you control exactly where one color hands off to the next.
90deg with two stops, #3a5bd9 at 0% and #3fd0c5 at 100%, produces background: linear-gradient(90deg, #3a5bd9 0%, #3fd0c5 100%); — a left-to-right blend from blue into teal. Switch the type to radial and it becomes background: radial-gradient(circle, #3a5bd9 0%, #3fd0c5 100%);, a blue glow fading to teal at the edges.Reference note: gradients are image values, so they work with background and background-image on any element. Modern browsers support 2 to many color stops; this tool keeps it to a practical 2–5 for clean, copy-ready code.
Sample gradient snippets
| Effect | CSS |
|---|---|
| Left to right, two colors | background: linear-gradient(90deg, #3a5bd9 0%, #3fd0c5 100%); |
| Top to bottom, two colors | background: linear-gradient(180deg, #7d97f4 0%, #2942b8 100%); |
| Diagonal, three colors | background: linear-gradient(45deg, #3a5bd9 0%, #c98a1a 50%, #3fd0c5 100%); |
| Radial glow | background: radial-gradient(circle, #3fd0c5 0%, #0c1018 100%); |
Frequently asked questions
- How do I create a CSS gradient?
- Use
linear-gradient()orradial-gradient()as the value of thebackgroundproperty, listing two or more comma-separated colors. For example:background: linear-gradient(90deg, #3a5bd9, #3fd0c5); - What is the difference between linear and radial gradients?
- A linear gradient blends colors along a straight line at a set angle, while a radial gradient spreads colors outward from a center point. Use linear for bands of color and radial for a spotlight or glow.
- How do I add more than two colors to a gradient?
- Add extra comma-separated color stops, each with an optional position percentage, such as
linear-gradient(90deg, #3a5bd9 0%, #c98a1a 50%, #3fd0c5 100%). This generator supports two to five stops. - How do I change the gradient direction or angle?
- For a linear gradient, set the angle —
0degpoints up,90degright,180degdown — or pick a direction preset. Radial gradients spread from the center and have no angle. - Can I use gradients as a background?
- Yes. A gradient is an image value, so apply it with
backgroundorbackground-imageon any element. It scales to fill the element by default. - How do I copy the gradient CSS?
- Build your gradient, then press Copy CSS. The full declaration is placed on your clipboard, ready to paste into your stylesheet.