How to Create a CSS gradient

Create beautiful CSS gradients visually with linear, radial, and conic gradients. Add multiple color stops, adjust directions, and copy CSS code instantly.

4 min read Gradient Generator Free, no signup required

Quick start

Gradient Generator — Create beautiful CSS gradients visually with linear, radial, and conic gradients.

Get started in under two minutes:

  1. Choose a gradient type
  2. Add and edit color stops
  3. Adjust direction or angle
  4. Copy the CSS code
Open Gradient Generator

Step-by-step instructions

Follow these steps to get the best results from Gradient Generator:

1

Choose a gradient type

Select Linear, Radial, or Conic from the gradient type selector at the top of the tool. Linear is the most common for backgrounds and dividers.

Tip: Conic gradients create pie-chart and sunburst effects.
2

Add and edit color stops

Click the gradient bar to add a new color stop. Drag existing stops left or right to position them. Click a stop and use the color picker to change its color.

Tip: Double-click a color stop to remove it. You need at least two stops for a valid gradient.
3

Adjust direction or angle

For linear gradients, drag the angle slider or type a degree value (0-360). For radial gradients, adjust the focal point position and size.

Tip: Common angles: 0deg = top to bottom, 90deg = left to right, 135deg = diagonal.
4

Copy the CSS code

Click "Copy CSS" to copy the complete background CSS declaration. It is ready to paste directly into your stylesheet.

Tip: Click "Save Preset" to bookmark gradients you create for quick recall later in the session.
Open Gradient Generator

Frequently asked questions

Is Gradient Generator free to use?

Yes — Gradient Generator is completely free with no account or signup required. All core features are available immediately.

Do I need vendor prefixes in the generated CSS?

No. The generated CSS uses standard properties that work in all modern browsers without vendor prefixes. If you need to support very old browsers, you may need to add fallbacks manually.

Does Gradient Generator work on mobile devices?

Yes — Gradient Generator works on smartphones and tablets through any modern mobile browser. The interface adapts to smaller screens automatically.

Ready to create a CSS gradient?

Gradient Generator is free to use. No account or signup required.

Open Gradient Generator