Gradient Generator

This tool supports all three types of CSS gradients: Linear gradients (straight-line color transitions), Radial gradients (circular or elliptical color transitions from a center point), and Conic gradients (color transitions rotated around a center point). Each type has customizable settings for direction, shape, and color stops.

Click the "+ Add Stop" button to add more color stops to your gradient. Each color stop can be customized with a specific color (using the color picker or hex input) and position (0-100%). You can add as many color stops as needed to create complex gradient effects.

For linear gradients, use the angle slider to control the direction from 0 to 360 degrees. 0° creates a bottom-to-top gradient, 90° creates a left-to-right gradient, 180° creates a top-to-bottom gradient, and 270° creates a right-to-left gradient. You can set any angle to create diagonal gradients.

For radial gradients, "circle" creates a perfectly circular gradient regardless of the element's dimensions, while "ellipse" creates an oval-shaped gradient that matches the element's aspect ratio. Ellipse is the default and adapts to rectangular elements, while circle maintains perfect roundness.

Yes! Radial gradients can be positioned at center, top, bottom, left, right, or any corner (top left, top right, bottom left, bottom right). This controls where the gradient originates from within the element.

The tool includes six beautiful preset gradients: Sunset, Ocean, Forest, Candy, Fire, and Purple. Simply click on any preset button to instantly apply that gradient configuration. You can then further customize the preset by adjusting colors, positions, or other settings.

There are two copy options: "Copy CSS" provides the complete CSS rule including the selector (.gradient-element), and "Copy Value" provides just the gradient value that you can use in any CSS property. Click either button to copy the code to your clipboard.

A gradient requires at least 2 color stops to create a color transition. The tool enforces this minimum and won't allow you to remove stops if only two remain. You can add as many additional stops as needed for more complex gradients.

While gradients are commonly used for backgrounds, they can be applied to many CSS properties including background-image, border-image, and even as mask-image. The generated CSS uses the background property, but you can adapt the gradient value for other properties.

Conic gradients transition colors in a circular rotation around a center point, like a color wheel. The angle setting controls where the gradient starts (0° is at the top), and colors transition clockwise around the circle. They're perfect for creating pie charts, loading indicators, or artistic effects.

Yes, CSS gradients are well-supported across all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. Linear and radial gradients have excellent support, while conic gradients are supported in all modern browsers (IE is not supported for any gradient type).

Absolutely! Each color stop can be edited at any time. Click the color picker to visually select a color, type a hex code directly in the text field, or adjust the position percentage to move the color stop along the gradient. Changes are reflected in the preview instantly.