🌈

CSS Gradient Generator

Create beautiful linear, radial, and conic CSS gradients. Add multiple color stops, adjust angle and position. Copy the CSS code instantly.

Type

Angle

135°

Color Stops

Generated CSS

Presets

About CSS Gradient Generator

Generate CSS gradient code for linear, radial, and conic gradients with unlimited color stops. Use presets for quick inspiration or build your own from scratch. The output is production-ready CSS you can paste directly into your stylesheet.

Gradient Types

Linear — colors transition along a straight line at any angle · Radial — colors radiate outward from a center point · Conic — colors rotate around a center point (like a pie chart)

Frequently Asked Questions

Click "Copy CSS" to copy the full CSS rule (e.g. background: linear-gradient(...);), then paste it into your stylesheet or a style attribute. Alternatively copy just the background value.
Yes — click "Add Color Stop" to add as many stops as you like. Each stop has a color and a position (0–100%). You can remove any stop with the × button.
A conic gradient transitions colors around a center point rather than from it. It's useful for pie charts, color wheels, and decorative effects. It was added to CSS in 2021 and is supported by all modern browsers.
Linear and radial gradients are supported in all modern browsers. Conic gradients are supported in Chrome, Firefox, Safari, and Edge — but not in older Internet Explorer. No vendor prefixes are needed for modern browsers.

About Gradient Generator

The Gradient Generator creates CSS linear, radial, and conic gradients visually with a live preview. Customize colors, stops, angle, and direction — then copy the ready-to-use CSS background property.

How to Use

  1. Choose a gradient type: Linear, Radial, or Conic.
  2. Click Add Color Stop to add colors at different positions.
  3. Drag the color stops along the gradient bar to adjust their positions.
  4. For linear gradients, set the Angle in degrees.
  5. The preview updates instantly. Click Copy CSS to copy the value.

How It Works

The tool builds a CSS background property using linear-gradient(), radial-gradient(), or conic-gradient() with your color stops at their specified positions. This is applied to the preview box in real time.

Example

A purple-to-pink diagonal gradient: background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
A sunset radial: background: radial-gradient(circle, #fbbf24, #ef4444, #7c3aed);

Frequently Asked Questions

Yes, using: background: gradient; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent. This clips the gradient to the text shape.
A conic gradient rotates colors around a center point (like a color wheel or pie chart). It is useful for pie charts, progress rings, and color pickers. conic-gradient() is supported in all modern browsers.
CSS cannot animate gradient values directly. A workaround is to animate background-position on a larger gradient background, or use @keyframes to change opacity between layered gradients.
Yes. linear-gradient and radial-gradient work in all modern browsers without vendor prefixes. conic-gradient works in Chrome, Safari, Firefox, and Edge (not in very old browsers).