OomTools

CSS Gradient Generator

Build a good-looking CSS gradient by eye: pick two colours, switch between linear and radial, spin the angle, and copy the exact `background` rule when it looks right. The preview updates live and everything runs in your browser.

  • 100% free
  • Private & safe
  • Runs in your browser

Why use CSS Gradient Generator?

CSS Gradient Generator is a quick, no-nonsense developer utility that runs entirely client-side, so your code and data never leave your machine.

  • Runs instantly in your browser — nothing to install, nothing uploaded.
  • Completely free, with no account, no watermarks and no usage limits.
  • Output: CSS background property
  • Choose a linear or radial gradient.
  • Works on any device — desktop, tablet and phone — and is fully keyboard accessible.

How to use CSS Gradient Generator

  1. Choose a linear or radial gradient.
  2. Pick the two colours and, for linear, set the angle.
  3. Watch the live preview update as you adjust.
  4. Copy the generated CSS background rule.

Examples

  • A 90° indigo-to-pink hero background.
  • A soft radial glow behind a card.

Supported formats & limits

  • Output: CSS background property

Limitations

  • Two colour stops for simplicity.
  • Preview reflects your browser's rendering.

Frequently asked questions

Can I use more than two colours?

This generator keeps it to two stops for clarity; you can add more stops by hand in the copied CSS.

Is anything uploaded?

No — the gradient is generated entirely in your browser.

Does radial support angles?

Angles apply to linear gradients; radial gradients emanate from the centre.

Was this tool helpful?

Related tools

CSS Box Shadow GeneratorCraft CSS box-shadows with offset, blur, spread, colour and inset — live preview.CSS Glassmorphism GeneratorCreate a frosted-glass (glassmorphism) effect with blur, tint and transparency.Image Color PickerClick any pixel in an image to get its HEX, RGB and HSL.CSS FormatterBeautify and indent minified or messy CSS.