About this tool
The preview and CSS output update instantly using standard CSS linear-gradient() and radial-gradient() syntax, so the code works exactly as shown in any modern browser.
How to use the Gradient Generator
- Pick two colors using the color inputs.
- Choose linear or radial and, for linear, set an angle.
- Preview the result in the box above the controls.
- Copy the CSS and paste it into your stylesheet.
Common use cases
- Creating a background gradient for a hero section or button
- Prototyping a brand color transition before finalizing a design
- Building a subtle overlay gradient for a card or banner image
Worked example
Pick a warm orange (#e8a33d) and a dark near-black (#15171b) with a 135-degree linear angle, and the tool outputs background: linear-gradient(135deg, #e8a33d, #15171b); — a diagonal fade often used behind a hero headline where you need enough contrast for white text to stay readable across the whole gradient. Switch the type to radial with the same two colors and the output changes to background: radial-gradient(circle, #e8a33d, #15171b);, which spreads the lighter color from the center outward — a look often used for a subtle spotlight or vignette effect behind a centered logo.
Things to watch out for
A gradient that looks fine in isolation can hurt text readability once content is layered on top — always check contrast at the specific point where your text sits, not just the gradient's overall appearance, since a linear gradient's lightness typically varies quite a bit from one end to the other. If you need a gradient with more than two colors, this tool won't generate that directly, but the CSS syntax is easy to extend by hand: add more comma-separated color stops inside the same linear-gradient() or radial-gradient() function, optionally with percentage positions like orange 0%, yellow 50%, red 100%. One more thing worth knowing: the angle for a linear gradient in CSS is measured clockwise from the top, so 0deg points upward and 90deg points rightward — the opposite of standard mathematical angle convention, which trips up plenty of people writing gradient CSS by hand for the first time.
Angles and direction keywords
The angle box maps to CSS directions like this. Angles run clockwise, and when you give no direction at all, CSS uses to bottom.
| Angle | Keyword | Gradient runs |
|---|---|---|
| 0deg | to top | bottom to top |
| 90deg | to right | left to right |
| 180deg | to bottom | top to bottom (default) |
| 270deg | to left | right to left |
Corner keywords such as to top right are not a fixed 45 degrees. The browser works out the angle from the box's shape, so that the gradient's midline runs through the other two corners, which means 45deg and to top right only look the same on a square element.
Radial gradients: circle vs ellipse
This tool writes radial-gradient(circle, …), which keeps the gradient round whatever the element's size. If you remove the word circle, CSS falls back to its default shape, an ellipse sized to the farthest corner, which stretches to match the box. On a wide banner, that is the difference between a round spotlight and an oval glow. You can also move the center by adding a position, such as circle at top left, which is useful for a light source coming from one corner of a card.
Using the result in Tailwind CSS
In Tailwind CSS v4, a linear gradient is written with a bg-linear-* class and color-stop utilities. The page's example, 135 degrees from #e8a33d to #15171b, becomes bg-linear-135 from-[#e8a33d] to-[#15171b]. Direction classes such as bg-linear-to-r replace the bg-gradient-to-r names used in Tailwind v3, and a radial gradient uses bg-radial. A middle color goes in a via- class, and each stop can take a position, such as from-10%.
Hard stops and stripes
Give two neighbouring colors the same position and the blend disappears, leaving a sharp line: linear-gradient(90deg, #e8a33d 50%, #15171b 50%) is half orange, half black. For repeating stripes, use repeating-linear-gradient() with fixed lengths, for example repeating-linear-gradient(45deg, #e8a33d 0 10px, #15171b 10px 20px).
Frequently asked questions
A linear gradient transitions colors in a straight line at a chosen angle. A radial gradient transitions colors outward from a center point in a circular pattern.
No — the angle only applies to linear gradients. Radial gradients here always expand outward from the center regardless of the angle value.
This tool generates a simple two-color gradient. CSS itself supports any number of color stops — once you have the base syntax from here, you can add more comma-separated colors manually.
Two common causes. The element may have no height, so there is nothing to paint on; give it content, padding or a height. Or the gradient was set with background-color, which only accepts a single color. Gradients are images in CSS, so use background or background-image instead.
If you leave out the angle or direction, linear-gradient() runs from top to bottom, the same as writing to bottom or 180deg. The first color is at the top edge and the last color is at the bottom edge of the element.
Layer a gradient that starts with the keyword transparent over the image, for example background: linear-gradient(to bottom, transparent, #15171b), url(photo.jpg). Backgrounds listed first are drawn on top, so the gradient sits over the photo and darkens it toward the bottom edge.