CSS Gradient Generator

Create linear, radial, and conic gradients with live preview and instant CSS output.

Selected Stop — 0%

Direction

deg

Live Preview

CSS Output

background
background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);
background-image
background-image: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);

Preset Gradients

About CSS Gradients

Linear Gradient

Transitions colours along a straight line at a defined angle. Use linear-gradient(angle, stop1, stop2...) for directional colour flows — great for backgrounds, buttons, and headers.

Radial Gradient

Transitions colours outward from a central point in a circle or ellipse. Perfect for spotlight and glow effects, vignettes, and button hover states.

Conic Gradient

Transitions colours around a central point, like a pie chart or colour wheel. Ideal for progress indicators, decorative rings, and abstract patterns.

How to Create a CSS Gradient Online

  1. Choose a gradient type — Linear, Radial, or Conic — using the buttons at the top of the editor.
  2. Click anywhere on the gradient bar to add a new colour stop at that position.
  3. Click a stop handle to select it, then pick a colour using the colour picker or type a hex code directly.
  4. Drag handles along the bar to reposition stops. Use the position slider or percentage input for precise placement.
  5. Adjust the opacity slider for each stop to create transparent or semi-transparent gradient effects.
  6. For linear gradients, choose a direction from the compass or enter a custom angle. For radial, pick shape and focal position. For conic, set the start angle.
  7. Copy the generated background or background-image CSS and paste it directly into your stylesheet.

Common Use Cases for CSS Gradients

  • Hero and section backgrounds — Replace flat background colours with rich linear gradients for more visually engaging page sections.
  • Button styles — Apply subtle linear gradients to buttons to add depth and a polished, premium feel.
  • Text gradients — Combine background-clip: text with a gradient to create colourful gradient text effects.
  • Card and overlay effects — Use semi-transparent radial or linear gradients as image overlays to improve text legibility.
  • Progress bars and loaders — Animate conic gradients to create smooth circular progress indicators.
  • Decorative borders — Use border-image with a gradient to create multi-coloured borders.
  • UI charts and pie segments — Build visual data displays using conic gradients as pure-CSS pie charts.

Frequently Asked Questions

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colours generated entirely by the browser — no image file required. Gradients are defined using CSS functions like linear-gradient(), radial-gradient(), and conic-gradient() and applied via the background or background-image property.

What is the difference between linear, radial, and conic gradients?

Linear gradients flow along a straight line at any angle. Radial gradients radiate outward from a centre point in a circle or ellipse. Conic gradients rotate colour stops around a centre point — like a colour wheel or pie chart.

How do I add a colour stop to the gradient?

Click anywhere on the gradient bar in the editor. A new stop will be created at that position. You can then select it to change its colour, opacity, and exact position.

Can I create a transparent gradient?

Yes. Select any colour stop and reduce its Opacity slider below 100%. The tool will automatically output the correct rgba() value for that stop so transparency works correctly in all browsers.

Should I use background or background-image?

Both work. Use background when you want a shorthand that may override other background properties (colour, position, size). Use background-image when you want to layer the gradient alongside a background-color fallback or another background layer.

Are CSS gradients supported in all browsers?

Linear and radial gradients are supported in all modern browsers and have been for many years. Conic gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed for current browser targets.

How do I use the gradient as a text colour?

Apply the gradient as a background-image on your text element, then add -webkit-background-clip: text; background-clip: text; color: transparent;. The gradient will show through the text shape.