CSS Gradient Generator

Build linear, radial and conic gradients with live preview

Settings

Preview

Generated CSS

People Also Use These Tools

Button Generator

Design custom CSS buttons

Box Shadow Generator

Create CSS box shadows

Glassmorphism

Frosted glass CSS effects

About This Tool

The CSS Gradient Generator creates linear, radial, and conic gradients with a live preview. Add multiple color stops, adjust the angle, and copy the CSS background property directly into your project.

How to Use

  1. Choose a gradient type: Linear, Radial, or Conic.
  2. Pick your colors using the color pickers. Click + Add Color Stop for more stops.
  3. Adjust the angle for linear/conic gradients.
  4. Click Copy CSS to copy the background property.

Why Choose OmniTools?

⚡ Instant Results

Live preview updates as you change settings.

🛡️ 100% Private

Everything runs in your browser. No data sent anywhere.

Frequently Asked Questions

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

Linear gradients transition along a straight line at a given angle. Radial gradients radiate outward from a center point. Conic gradients rotate around a center point like a color wheel.

Can I add more than 2 colors?

Yes. Click "+ Add Color Stop" to add as many colors as you need. Each stop can be independently colored.

Does the CSS work in all browsers?

Yes. Linear, radial and conic gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge).

Related Tools