UlvixorCSS Gradient Generator
Create linear or radial CSS gradients by adjusting angle, colors, and positions with a live preview, then copy the ready-to-paste `background` code. Everything is generated in your browser.
How it works
- Choose the gradient type: linear or radial.
- If it's linear, adjust the angle with the slider (0° to 360°).
- Add, remove, or adjust the gradient's colors and their position (0% to 100%) with each stop's controls.
- The preview and the CSS code update instantly with every change.
- Copy the full `background` declaration with one click.
Use cases
- Create a gradient background for a landing page or website section.
- Test different color and angle combinations before deciding on the final gradient.
- Generate a radial gradient for a button, badge, or featured element.
- Learn the syntax of `linear-gradient()` and `radial-gradient()` visually.
Common mistakes
- Using only two colors at the extremes (0% and 100%) expecting the same result as with in-between colors.Add extra colors at intermediate positions (for example, 50%) to achieve more elaborate three-or-more-color transitions instead of a simple two-tone gradient.
- Confusing a linear gradient's angle with a traditional circle's degrees (0° pointing right).In CSS, 0deg points upward and degrees increase clockwise; 90deg points right and 180deg points down. Adjust the angle by watching the preview instead of calculating it mentally.
- Copying only the gradient value and pasting it where the full declaration is expected, or vice versa.The copy button includes the full declaration (`background: ...;`), ready to paste directly inside a CSS rule.
Frequently asked questions
No. The gradient is calculated and previewed entirely in your browser. Nothing is sent to any server.
There's no fixed limit. You can add as many colors as you need with the 'Add color' button, and adjust each one's position independently.
A linear gradient transitions colors in a straight line along the chosen angle. A radial gradient transitions colors in concentric circles from the center outward.
Yes, `linear-gradient()` and `radial-gradient()` are part of the CSS standard and are supported by all modern browsers with no prefixes needed.
Alternatives
You can write `linear-gradient()` or `radial-gradient()` directly in your CSS by checking MDN's documentation, but previewing the result means saving and reloading the browser repeatedly. This tool shows the result instantly as you adjust each value.