Gradient Generator

Generate stunning CSS gradients with multiple color stops. Supports linear, radial, and conic gradients. Customize angle, colors, and export CSS code.

0%
100%
CSS
background: linear-gradient(90deg, #667EEA 0%, #764BA2 100%);
Create beautiful CSS gradients with up to 8 color stops. All gradients are generated locally and the CSS is compatible with all modern browsers.

How to Use This Tool

  1. 1

    Choose a gradient type

    Select linear (straight line), radial (circular from center), or conic (sweeping around a point) gradient style.

  2. 2

    Adjust colors and positions

    Click the color picker to change each color. Use the slider to adjust the position (0-100%) where each color appears.

  3. 3

    Set the angle or direction

    For linear and conic gradients, use the angle slider (0-360°) or quick preset buttons to set the gradient direction.

  4. 4

    Copy the CSS code

    Click 'Copy CSS' to copy the complete background property. Paste directly into your stylesheet.

Frequently Asked Questions

How many colors can I add?
You can add up to 8 color stops. Each stop can be positioned anywhere from 0% to 100% along the gradient.
What's the difference between linear, radial, and conic gradients?
Linear gradients flow in a straight line at any angle. Radial gradients expand outward from a center point in a circle. Conic gradients sweep around a center point like a color wheel.
Is the generated CSS cross-browser compatible?
Yes. Modern CSS gradients are supported in all current browsers (Chrome, Firefox, Safari, Edge). No vendor prefixes are needed for browsers released after 2015.
Can I use transparent colors?
The color picker supports HEX colors. For transparency, you can manually edit the CSS to use rgba() or hsla() values after copying.