Skip to content
ToolsOnDuty - free online tools
CSS & Design

CSS Gradient Generator

Create a linear CSS gradient with a live preview and copy the CSS.

Free browser toolRuns in your browserNo sign-up
background: linear-gradient(135deg, #6366F1, #EC4899);

Choose linear, radial or conic, pick two colours and an angle, or roll a random gradient, then copy the CSS.

About the CSS Gradient Generator

CSS gradients let you blend colours smoothly as a background without an image. A linear gradient runs the blend along an angle you choose.

This tool lets you pick two colours and an angle, previews the result live and gives you the exact CSS declaration to copy.

You can also roll a random gradient for quick inspiration.

Key features

  • Two-colour linear gradient
  • Adjustable angle with a live preview
  • Random gradient button
  • Copy ready-to-use CSS

How to use

  1. 1Choose a start and end colour.
  2. 2Drag the angle slider to set the direction.
  3. 3Copy the CSS, or click Random gradient for ideas.

Examples

Diagonal blend
Input: 135deg, #6366F1 to #EC4899
Output: background: linear-gradient(135deg, #6366F1, #EC4899);

The angle sets the direction and the two colours set the start and end of the blend.

Frequently asked questions

What CSS does it produce?
A background declaration using linear-gradient, for example background: linear-gradient(135deg, #6366F1, #EC4899);. Paste it into your stylesheet.
Can I use more than two colours?
This tool focuses on clean two-colour gradients. You can extend the copied CSS by adding more colour stops manually.
Does the angle work like CSS angles?
Yes. 0deg points upward and angles increase clockwise, matching the CSS linear-gradient specification.

Continue your workflow

Open a related tool to prepare your files or refine the finished result.