Generators tool

CSS Gradient Generator

Linear, radial and conic CSS gradients with live preview.

Free Runs in your browser

About this tool

CSS Gradient Generator lets you design a background gradient by eye and gives you the exact CSS to paste into your site. It supports linear, radial and conic gradients with up to eight colour stops.

How to use CSS Gradient Generator

  1. Choose the gradient type and set the angle or centre.
  2. Pick colours and drag each stop to its position.
  3. Copy the CSS and paste it into your stylesheet.

Questions people ask

Why does the code include two background lines?

The first line is a solid fallback colour for very old browsers. Browsers that understand gradients use the second line and ignore the first.

What does the angle mean in a linear gradient?

0deg runs from bottom to top, 90deg from left to right, 180deg from top to bottom. The angle goes clockwise.

Do conic gradients work in all browsers?

Yes, conic-gradient() is supported in all current versions of Chrome, Edge, Firefox and Safari.

More generators tools

See all 14 →
Box Shadow GeneratorDesign layered CSS box shadows and copy the code. Random Number GeneratorPick random numbers in any range, with no repeats. Coin FlipFlip a virtual coin with history and streak stats. Dice RollerRoll 1–10 dice: d4, d6, d8, d10, d12 or d20. Spin the WheelRandom name picker wheel with your own entries. Barcode GeneratorCode 128, EAN-13, UPC-A, Code 39 and ITF barcodes.
Esc