Gradient Generator

Gradient Generator creates CSS gradient code directly in your browser. Choose between linear, radial, and conic gradient types, adjust color stops and their positions, and copy the ready-to-use background property with one click. No design software or external service needed.

Tool interface

The tool is divided into a few focused sections:

• Gradient type — three buttons to switch between Linear, Radial, and Conic. Switching types shows only the relevant controls.
• Linear options — an angle slider (0–360°) with six preset buttons for the most common directions.
• Radial options — shape (circle or ellipse) and a position selector (center, corners).
• Conic options — a start angle slider for the sweep direction.
• Color stops — each stop has a color picker, a position slider, and a numeric input. Up to 6 stops, minimum 2. The + Add stop button inserts a new stop between the last two.
• Preview — a live rectangle that reflects every change instantly.
• CSS output — a read-only field with the complete background: ...; declaration, ready to paste.

Tool description

CSS gradients are among the most widely used styling techniques in modern web design — backgrounds, buttons, cards, overlays, banners, and decorative sections all rely on them. Writing gradient CSS by hand is workable for simple two-stop cases, but becomes tedious and difficult to visualize once you add more stops, adjust positions, or experiment with angles.

Gradient Generator makes the process visual. You pick colors, drag sliders, and see the result in real time. When you are satisfied, Copy puts the exact CSS on your clipboard.

The three gradient types cover different design needs:

• Linear gradients flow in a straight line at a chosen angle. They are the most common type — used in hero backgrounds, button fills, and colored dividers.
• Radial gradients radiate outward from a point, useful for spotlight effects, glows, and soft circular backgrounds.
• Conic gradients sweep around a center point — practical for pie charts, color wheels, and hue selectors.

All output is formatted as a standard background CSS property, compatible with every modern browser without vendor prefixes.

How to use

1. Select a gradient type: Linear, Radial, or Conic.
2. For Linear, drag the angle slider or click a preset button (0°, 45°, 90°, 135°, 180°, 270°).
3. For Radial, pick a shape and center position. For Conic, set the start angle.
4. Click the color swatch on each stop to choose a color.
5. Drag the position slider or type a percentage to control where each color transitions.
6. Use + Add stop to introduce an intermediate color (up to 6 stops total).
7. Click Copy to copy the CSS declaration to your clipboard and paste it into your stylesheet.