What is Gradient Generator?

A visual CSS gradient builder that lets you create linear, radial, and conic gradients with unlimited color stops. Adjust angles, positions, and colors in real time and copy the CSS with one click.

Pick between linear, radial, and conic gradients, set an angle from 0° to 360°, and add as many color stops as you need with per-stop opacity for transparent overlays. Start from a curated preset like Sunset, Instagram, or Ocean, then fine-tune the colors. For radial gradients, choose a circle or ellipse shape and an extent keyword, and switch the color blend to OKLab or OKLCH for smoother modern interpolation or apply an easing curve. Flip on Animate to get a ready-to-paste @keyframes loop for a living background. The output is plain CSS you drop into a stylesheet, Tailwind config, or design tool.

How to use

1. Step 1 — Choose your gradient type (linear, radial, or conic) and set the direction or angle using the angle slider or preset buttons.
2. Step 2 — Add color stops by clicking the gradient bar. Adjust each stop's color and position by dragging or entering exact values.
3. Step 3 — Preview the gradient live, then copy the generated CSS code to your clipboard or download it as a CSS file.

When to use

• Designing hero sections, buttons, or card backgrounds without opening Photoshop.
• Matching a brand's palette across web, email, and presentation slides.
• Prototyping CSS effects before handing specs to a developer.

Result

Say you want a sunset hero background. Pick a 135° linear gradient, set orange at 0%, rose at 50%, and purple at 100%, then copy the CSS into your stylesheet.

FAQ

What's the difference between linear, radial, and conic gradients?

Linear runs colors along a straight line at the angle you set. Radial spreads them outward from a centre point, like a sunburst. Conic sweeps them around a circle, useful for pie charts or color wheels.

How many color stops can I add?

There's no hard cap. Most designs use two to four stops. Beyond five or six the gradient starts to look muddy because the colors blend into each other and lose the distinct transitions you wanted.

Why does my gradient look banded on a dark background?

Banding shows up when adjacent colors are too close in luminance. Increase the contrast between stops, switch the color blend dropdown to OKLCH or OKLab for perceptual interpolation, or add a subtle noise overlay in CSS.

Can I use these gradients in Figma or Sketch?

The CSS itself won't paste directly, but the color values and positions translate one-to-one. Copy each stop's hex and percentage into the gradient editor of your design tool.

What's the angle property doing exactly?

For linear gradients, 0° points up and the angle rotates clockwise — 90° is left-to-right, 180° is top-to-bottom. For conic, the angle sets where the sweep starts on the circle.

Related Tools