CSS Gradient Generator

How to Use the CSS Gradient Generator

1. Choose a gradient type — select Linear for straight-line gradients or Radial for circular/elliptical gradients.
2. Set the direction — for linear gradients, adjust the angle slider (0–360 degrees). For radial gradients, pick a shape (circle or ellipse) and a center position.
3. Add and adjust color stops — click the color swatch to change a color, type a hex value, or adjust the position percentage. Add more stops with the "Add Color Stop" button, or remove them with the delete button. Drag stops to reorder them.
4. Preview your gradient — the large preview area updates in real time. The gradient bar below shows where each color stop sits.
5. Copy the CSS — click "Copy CSS" to copy the generated code to your clipboard. Paste it into your stylesheet.

You can also click any preset swatch to load a beautiful starting gradient, or hit "Randomize" to generate a random combination for inspiration.

CSS Gradients Explained

CSS gradients let you display smooth transitions between two or more colors without using images. They are generated by the browser, which means they scale perfectly on any screen and load instantly.

Linear Gradients

A linear gradient transitions colors along a straight line. You define the direction (as an angle or keyword) and a set of color stops:

background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%);

The angle 90deg means the gradient goes from left to right. 0deg goes bottom to top, 180deg goes top to bottom. You can use keywords like to right, to bottom left, etc.

Radial Gradients

A radial gradient radiates outward from a center point. You can control the shape (circle or ellipse) and the position of the center:

background: radial-gradient(circle at center, #667eea 0%, #764ba2 100%);

If you omit the shape, the browser defaults to an ellipse that matches the element's aspect ratio. Specifying circle creates a perfectly round gradient regardless of the element's dimensions.

Color Stops

Each color stop defines a color and its position along the gradient line. Positions are specified as percentages from 0% (the start) to 100% (the end). You can add as many stops as you need:

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);

If you omit positions, the browser distributes colors evenly. Placing two stops at the same position creates a hard color boundary instead of a smooth transition.

CSS Gradient Examples

Here are some popular gradient styles you can use in your projects:

Browser Support for CSS Gradients

CSS gradients are well supported across all modern browsers. The linear-gradient() and radial-gradient() functions work without vendor prefixes in all current browser versions. For maximum compatibility with older browsers, the generated code includes a -webkit- prefix.

With over 97% global browser support, you can use CSS gradients confidently in production. The tool generates both the standard syntax and the -webkit- prefixed version for legacy WebKit browsers.

Frequently Asked Questions