Gradient Type
Angle: 90°
Color Stops
CSS Output
Build linear, radial, and conic CSS gradients visually. Add unlimited color stops, adjust angle, and copy production-ready CSS code in one click.
Select gradient type — Choose between linear (straight line), radial (circular), or conic (rotating) gradients.
Adjust angle — Use the slider to set the gradient direction (for linear and conic types).
Add color stops — Each stop has a color picker and position slider. Add unlimited stops by clicking "Add Color Stop".
Copy the CSS — Click "Copy CSS" to copy the generated code, or "Download .css" to save it as a file.
The tool dynamically builds CSS gradient function strings based on your selected type, angle, and color stops. The preview element applies the gradient as its background in real time. The output textarea shows the complete background: ... CSS declaration ready to paste into any stylesheet.
Select a gradient type — linear, radial, or conic — using the buttons at the top. For linear and conic gradients, drag the angle slider to set the direction of the color transition. Click "Add Color Stop" to add colors; each stop comes with a color picker and position slider for precise control. Arrange your stops and watch the live preview update instantly. When you are happy with the result, click "Copy CSS" to copy the code or "Download .css" to save it as a file for your project.
Linear gradients transition colors along a straight line in a specified direction. Radial gradients radiate outward from a center point, creating circular color spreads. Use linear for backgrounds and radial for spotlight effects.
Yes! Click "Add Color Stop" to include unlimited colors. Each color can be positioned independently (0-100%) creating complex multi-color gradients. The order of stops determines the color transition sequence.
Conic gradients rotate colors around a center point, like a pie chart. They're perfect for creating loaders, dials, pie charts, and any design requiring circular color distribution.
Click "Copy CSS" and paste it into your CSS file or HTML style attribute. The code includes the gradient function with all your settings. Apply it to background, background-image, or any CSS property accepting images.
There is no single best angle — it depends entirely on your design goals. A 90-degree angle creates a top-to-bottom effect, 180 degrees goes bottom-to-top, and 45 degrees gives a diagonal sweep. For most website backgrounds, angles between 135 and 180 degrees produce natural-looking results that guide the eye comfortably. Experiment with the angle slider to find what complements your specific layout and content.
Yes, but with some limitations. Most modern email clients support linear gradients in CSS, though support for radial and conic gradients is far more limited. Always define a fallback solid background color before the gradient declaration so recipients using older email clients still see a reasonable design. Test your email across multiple clients before sending to ensure consistent rendering.
No. All our tools are free to use and work directly in your browser without registration or sign-in. Just open the page and start using the tool.
Yes. The tool is fully responsive and works on any modern browser on iPhone, iPad, Android phones and tablets. The interface adapts to your screen size automatically.