🌈 CSS Gradient Generator
By ToolNimba Editorial Team · Updated 2026-06-19
Adjust the colors, angle, or type. The preview and CSS update live.
This CSS gradient generator builds a linear or radial gradient from the colors you choose and gives you the exact CSS to paste into your stylesheet. Pick two or more color stops, drag the angle for a linear gradient or switch to radial, and watch the preview update live. When it looks right, copy the ready-to-use background property.
What is the CSS Gradient Generator?
A CSS gradient is an image generated by the browser that blends smoothly between two or more colors. Because it is treated as a background image, you set it with the background or background-image property rather than background-color. The two everyday types are linear-gradient, which blends along a straight line, and radial-gradient, which blends outward from a center point. Both are widely supported and need no images or extra HTTP requests, which makes them fast and crisp at any screen resolution.
A linear gradient is defined by a direction and a list of color stops. The direction is usually an angle in degrees, where 0deg points straight up, 90deg points to the right, 180deg points down, and 270deg points left. Each color stop is a color optionally followed by a position, written as a percentage. So linear-gradient(90deg, #337bff 0%, #ff4d6d 100%) blends from blue on the left to pink on the right. If you leave positions out, the browser spaces the stops evenly.
A radial gradient blends from a center point outward, and its first argument describes the shape: circle or ellipse. The color stops work the same way as in a linear gradient, with positions running from the center (0%) to the edge (100%). Adding more stops, or moving their positions closer together, lets you create sharper transitions, soft glows, or banded stripe effects without ever touching an image editor.
When to use it
- Creating a colorful hero or call-to-action background for a landing page without using an image file.
- Building soft button and card backgrounds that scale crisply on high-density (Retina) displays.
- Prototyping color blends quickly and copying the exact CSS into a stylesheet or design system.
How to use the CSS Gradient Generator
- Choose Linear or Radial at the top.
- Pick a color for each stop and set its position as a percentage.
- For a linear gradient, drag the angle slider; for radial, choose circle or ellipse.
- Use Add color to insert extra stops, or Remove to delete one (a minimum of two is kept).
- Check the live preview, then click Copy to grab the background CSS.
Formula & method
background: linear-gradient(<angle>deg, color1 pos1%, color2 pos2%, ...); Radial: background: radial-gradient(<shape>, color1 pos1%, color2 pos2%, ...);Worked examples
A simple two-color linear gradient running left to right.
- Set the type to Linear.
- Set the angle to 90deg (pointing right).
- Stop 1: #337bff at 0%. Stop 2: #ff4d6d at 100%.
Result: background: linear-gradient(90deg, #337bff 0%, #ff4d6d 100%);
A three-stop diagonal gradient with a color held in the middle.
- Keep the type as Linear and set the angle to 45deg.
- Add a third stop with the Add color button.
- Stops: #337bff at 0%, #6dffb0 at 50%, #ff4d6d at 100%.
Result: background: linear-gradient(45deg, #337bff 0%, #6dffb0 50%, #ff4d6d 100%);
A circular radial glow from light center to dark edge.
- Switch the type to Radial and choose Circle.
- Stop 1: #ffffff at 0%. Stop 2: #1e293b at 100%.
Result: background: radial-gradient(circle, #ffffff 0%, #1e293b 100%);
Common linear-gradient angles and the direction they point
| Angle | Direction | Keyword equivalent |
|---|---|---|
| 0deg | Bottom to top | to top |
| 90deg | Left to right | to right |
| 180deg | Top to bottom | to bottom |
| 270deg | Right to left | to left |
| 45deg | Bottom-left to top-right | to top right |
| 135deg | Top-left to bottom-right | to bottom right |
Common mistakes to avoid
- Using background-color instead of background. A gradient is a generated image, so it must go on background or background-image. background-color only accepts a single solid color and will ignore the gradient.
- Getting the angle direction backwards. In CSS, 0deg points up and angles increase clockwise, so 90deg points right. This is different from a maths protractor, where 90deg points up. Check the preview if a gradient looks rotated.
- Forgetting that gradients need a sized box. A gradient fills its element, so an element with no height (an empty div, for example) shows nothing. Give the element a height, padding, or content so the background has an area to paint.
- Out-of-order color stop positions. If a later stop has a smaller position than an earlier one, the browser clamps it, which can create a hard edge you did not intend. Keep positions increasing from first stop to last.
Glossary
- Gradient
- A smoothly blended transition between two or more colors, generated by the browser as a background image.
- Color stop
- A single color in the gradient, with an optional position (in percent) that sets where that color sits along the blend.
- Linear gradient
- A gradient that blends colors along a straight line, defined by an angle or a direction keyword.
- Radial gradient
- A gradient that blends colors outward from a center point, shaped as a circle or an ellipse.
- Angle (deg)
- The direction of a linear gradient in degrees, where 0deg points up and the angle increases clockwise.
Frequently asked questions
How do I create a CSS gradient?
Set the background property to a gradient function, such as background: linear-gradient(90deg, #337bff, #ff4d6d). This tool lets you pick the colors and angle visually and copies that exact CSS for you.
What is the syntax for a linear gradient?
It is linear-gradient(direction, color-stop1, color-stop2, ...). The direction is an angle like 90deg or a keyword like to right, and each color stop is a color with an optional position in percent.
How do I set the direction or angle of a gradient?
Add an angle as the first argument, for example linear-gradient(45deg, ...). In CSS, 0deg points up and angles increase clockwise, so 90deg goes left to right and 180deg goes top to bottom.
What is the difference between linear and radial gradients?
A linear gradient blends colors along a straight line set by an angle. A radial gradient blends outward from a center point in a circle or ellipse shape. This tool supports both with a toggle.
Can I use more than two colors in a gradient?
Yes. Use the Add color button to insert extra stops, each with its own color and position. Browsers blend smoothly through every stop in the order you list them.
Are CSS gradients supported in all browsers?
Yes. linear-gradient and radial-gradient have been supported unprefixed in all modern browsers (Chrome, Firefox, Safari, and Edge) for years, so no vendor prefixes are needed for current versions.