Gradient Generator Guide

How to use the OmniColor gradient generator to create multi-stop CSS gradients — with live preview, unlimited color stops and export options.

What Is the Gradient Generator?

The OmniColor gradient generator is a visual editor for CSS gradients. Instead of writing gradient syntax by hand and guessing at the result, you build the gradient with color pickers, position sliders and angle controls, and copy the exact CSS when you are done.

Open the Gradient Generator →

How to Build a Gradient

Step 1: Choose the gradient type

From the "Type" dropdown, choose:

  • Linear: Transition along a straight line at any angle
  • Radial: Transition outward from the center
  • Conic: Transition around the center like a clock face

Step 2: Set the angle (linear and conic)

Use the angle slider to rotate the gradient direction. For linear gradients:

  • 0° — bottom to top
  • 90° — left to right
  • 135° — top-left to bottom-right (most popular)
  • 180° — top to bottom
  • 270° — right to left

The angle affects the visual feel of the gradient more than you might expect. Try several values to see which feels right for your design.

Step 3: Edit color stops

Each color stop has:

  • A color swatch: Click to open the color picker
  • A position (0–100%): Where the color sits along the gradient
  • A remove button: Delete the stop

Step 4: Add more stops

Click "Add Stop" to insert another color in the gradient. You can have as many stops as you need.

Common multi-stop patterns:

  • 3-stop rainbow: red → yellow → green
  • 5-stop spectrum: red → orange → yellow → green → blue
  • Hard-edge stops: Two colors at the same position (0% → 50%, 50% → 100%) create a sharp boundary

Step 5: Randomize (optional)

The "Randomize" button generates random colors for your stops. Useful for exploring unexpected combinations.

Reading the Live Preview

The preview area updates instantly as you change any value. This is the whole point of a visual gradient generator — you see exactly what the CSS will produce before you write any code.

Resize your browser to test how the gradient looks at different container sizes. CSS gradients are responsive and scale smoothly.

Copying the CSS

The CSS output panel shows the exact CSS declaration your gradient produces. Click "Copy CSS" to copy it to your clipboard.

The copied CSS looks like:

background: linear-gradient(135deg, #155EEF 0%, #7C3AED 100%);

Paste this directly into any CSS rule that accepts a background or background-image property.

Downloading the CSS

Click "Download .css" to save the gradient as a CSS file. The file contains a class you can import into any project:

.gradient {
  background: linear-gradient(135deg, #155EEF 0%, #7C3AED 100%);
}

Common Gradient Patterns

Two-color hero gradient

Simple, elegant. Two colors at 0% and 100%, angle around 135°. Works well for hero sections and card backgrounds.

Three-color fade

Three colors at 0%, 50% and 100%. The middle color creates an intermediate tone. Useful for gradients that need to feel more dynamic than a simple two-color transition.

Hard-edge split

Two colors at the same 50% position create a sharp, hard-edged split. Very different from a smooth gradient but built the same way.

Rainbow conic

Conic gradient with 6 color stops at even intervals (0°, 60°, 120°, 180°, 240°, 300°) produces a smooth color wheel.

Radial spotlight

Radial gradient from white at center to transparent at edge. Creates a soft glow or spotlight effect over backgrounds and images.

Best Practices

Keep the angle consistent

If you use 135° gradients on one card, use 135° on all cards. Consistency matters more than the specific angle.

Test contrast

Text on gradients must pass WCAG contrast across the entire gradient. Test the lightest and darkest points of the gradient separately — text that passes in one area might fail in another.

Use tints of the same hue

Gradients that transition between colors from the same hue family (analogous) look more sophisticated than gradients between unrelated hues. Blue → purple is more elegant than blue → orange.

Consider transparency

Gradients that fade to transparent are useful for overlays on images. Use rgba(0, 0, 0, 0) or "transparent" as a stop color.

Avoid excessive stops

Two to four stops are usually enough. More than five rarely looks better — it usually looks busier.

Browser Compatibility

All gradients generated by this tool use standard CSS syntax and work in:

  • Chrome 26+ (linear, radial)
  • Firefox 16+ (linear, radial)
  • Safari 6.1+ (linear, radial)
  • Edge 12+ (linear, radial)
  • Conic gradients: Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+

For the broadest compatibility, use linear or radial gradients. Conic gradients are supported only in browsers from 2020 onward.

Common Mistakes

Using the wrong angle

Angles are measured clockwise from the top. 0° is up, 90° is right, 180° is down, 270° is left. If your gradient goes the wrong way, your angle is 180° off.

Forgetting to test on multiple backgrounds

A gradient looks different on light vs dark surrounding backgrounds. Test both.

Assuming gradient text is accessible

Gradient text often fails WCAG contrast at some points. Use solid colors for critical text.

Not testing performance

Very complex gradients (many stops, large areas) can be slower to render than simple ones. Test with Chrome DevTools performance profiler for large hero sections.

Related Tools

Frequently Asked Questions

Open Gradient Generator →