Runs in your browser. Your files and text never leave your device - nothing is uploaded.
background: linear-gradient(90deg, #6366f1, #ec4899);Create a CSS Gradient Background
The Tools Kit’s free CSS Gradient Generator lets you build a linear or radial gradient visually instead of guessing values in a stylesheet. Choose the gradient type, pick two colors, set the angle for a linear blend, and the preview updates as you go. When it looks right, one click copies the finished rule, ready to paste into your CSS.
With the default settings the tool produces background: linear-gradient(90deg, #6366f1, #ec4899);, an indigo-to-pink blend running left to right. Everything is generated in your browser; nothing is uploaded.
How to Use the CSS Gradient Generator
- 1
Choose a gradient type
Select Linear for a straight-line blend or Radial for a circular blend that spreads out from the center.
- 2
Set the angle
For a linear gradient, drag the angle slider anywhere from 0 to 360 degrees. 90 degrees runs left to right; 180 degrees runs top to bottom.
- 3
Pick your two colors
Use the Color 1 and Color 2 pickers to choose the start and end colors. The preview box updates as you change them.
- 4
Copy the CSS
Click Copy to put the full background rule on your clipboard, then paste it into your stylesheet or inline style.
Need an exact brand color first? Look up its HEX, RGB and HSL values in the Color Picker, then set the same color in either gradient picker.
Linear vs Radial Gradient in CSS
A linear gradient blends from one color to another along a straight line. The output looks like linear-gradient(135deg, #6366f1, #ec4899): the angle comes first, then the colors in order. Linear gradients are the usual choice for hero sections, buttons and banner backgrounds.
A radial gradient spreads outward from a center point, with the first color in the middle and the second at the edges. This generator writes it as radial-gradient(circle, #6366f1, #ec4899), a centered circle that grows until it reaches the farthest corner of the element. Radial gradients suit spotlight effects, soft glows behind an image, and circular badges. The angle slider is hidden in radial mode because a centered circle has no direction.
Pairing a gradient with depth? Build a matching shadow in the Box Shadow Generator and drop both rules onto the same card or button.
CSS Gradient Angles Explained
In linear-gradient(), the angle sets the direction the gradient travels toward. 0deg points straight up and the angle turns clockwise, so the first color starts on the opposite side. That trips many people up: a gradient at 0deg starts at the bottom, not the top.
| Angle | Direction of the blend |
|---|---|
| 0deg | Bottom to top (Color 1 at the bottom) |
| 45deg | Bottom-left corner toward the top-right |
| 90deg | Left to right (the tool’s default) |
| 135deg | Top-left corner toward the bottom-right |
| 180deg | Top to bottom (the CSS default when no angle is given) |
| 270deg | Right to left |
| 360deg | Same direction as 0deg, bottom to top |
On a square element, 45deg runs exactly corner to corner. On a wide or tall element the browser keeps the angle fixed, so the blend no longer lines up with the corners; the keyword form to top right follows the corners instead, if you edit it in by hand.
Using the Generated Gradient CSS
The copied line uses the background shorthand, so it works as-is in a class, an inline style or a CSS-in-JS object. A gradient counts as a background image rather than a color, which means it will not work in color or border-color; for gradient text, set it as the background and add background-clip: text with a transparent text color.
To go beyond two colors, add more comma-separated stops to the copied value, for example linear-gradient(90deg, #6366f1, #22c55e, #ec4899), and add percentages such as #22c55e 30% to control where each one sits. Once the stylesheet is finished, tidy it with the Code Beautifier while editing and shrink it for production with Minify CSS.
Common uses
- Hero section, landing page and banner backgrounds
- Gradient buttons, cards and call-to-action blocks
- Gradient text headings using
background-clip: text - Prototyping a layout with a gradient block and Lorem Ipsum placeholder copy before the real content is ready
- Carrying a site’s gradient theme into its graphics, alongside exporting an SVG logo with SVG to PNG or making a site icon with the Favicon Generator
More utilities for front-end work are collected in the developer tools section of The Tools Kit.
CSS gradient terms explained
| Term | What it means here |
|---|---|
| Linear gradient | A color transition along a straight line, written with linear-gradient() and an angle |
| Radial gradient | A color transition that spreads outward from a center point, written with radial-gradient() |
| Color stop | A color in the gradient list, optionally with a position such as 50%; this tool outputs two stops |
| Gradient line | The imaginary line a linear gradient follows; its direction is set by the angle |
| deg | The CSS angle unit for degrees; 0deg points up and the angle turns clockwise |
| HEX color | A six-digit color code such as #6366f1, the format the color pickers produce |
Frequently Asked Questions
Use a gradient function as a background value, for example background: linear-gradient(90deg, #6366f1, #ec4899);. This generator builds that rule for you: pick Linear or Radial, choose two colors, set the angle for a linear gradient, and click Copy.
A linear gradient blends colors along a straight line in the direction of its angle. A radial gradient blends outward from a center point, so the first color sits in the middle and the second color is on the outside. This tool outputs radial gradients as radial-gradient(circle, color1, color2), a centered circle.
180deg. In linear-gradient(), 0deg points up, so the first color starts at the bottom; 90deg runs left to right, 180deg runs top to bottom and 270deg runs right to left. If you leave the angle out entirely, CSS uses 180deg.
Set the angle to 45deg for a blend from the bottom-left toward the top-right, or 135deg for top-left toward bottom-right. CSS also accepts keywords such as "to bottom right", but this tool writes the angle in degrees.
The generator produces a two-color gradient. To add more colors, paste the copied CSS and insert extra comma-separated colors, for example linear-gradient(90deg, #6366f1, #22c55e, #ec4899). Browsers space the stops evenly unless you add positions such as 30%.
Not in the tool itself. The color pickers give solid six-digit hex colors with no position values. You can edit the copied CSS by hand to add positions (for example #6366f1 20%) or swap a color for an rgba() or #rrggbbaa value with transparency.
Set the gradient as the element’s background, then clip it to the text: background-clip: text; -webkit-background-clip: text; color: transparent;. The background rule this tool copies covers the first part; add the clip and color lines after it.
No. linear-gradient() and radial-gradient() work unprefixed in all current browsers, so the generator outputs the standard syntax only. Prefixes such as -webkit-linear-gradient are only needed for very old browsers.
Either works, because a gradient is an image value. The tool outputs the background shorthand, which also resets other background properties. Use background-image instead if you want to keep an existing background-color or background-size on the element.
Usually, yes. A CSS gradient is drawn by the browser, so it adds no image request, scales to any size without blurring, and is easy to edit in code. A raster image is only worth it for complex effects CSS cannot produce.
Yes. It is free with no signup, and the gradient is built entirely in your browser. Nothing you choose is sent to a server.
Reviewed by Raja Jahangir · Last reviewed: October 7, 2026
How do you create a CSS gradient?
To create a CSS gradient, choose Linear or Radial, pick two colours, and for a linear gradient set the angle from 0 to 360 degrees. The preview updates live and the finished rule is one click to copy, for example background: linear-gradient(90deg, #6366f1, #ec4899); for a left-to-right blend, or radial-gradient(circle, #6366f1, #ec4899) for a centred one.
What angle makes a CSS gradient go top to bottom?
180deg. In CSS linear-gradient, 0deg points up, so the first colour sits at the bottom; 90deg runs left to right; 180deg runs top to bottom; and 270deg runs right to left. Omitting the angle defaults to 180deg, which is why 'linear-gradient(red, blue)' fades from red at the top to blue at the bottom.