CSS Gradient Generator

Build linear and radial CSS gradients with as many color stops as you like, adjust the angle, and copy production-ready CSS, all in your browser.

A CSS gradient generator builds the background gradient and hands you the code to paste. Add as many color stops as you want, switch between linear and radial, set the angle, and copy the CSS, so it works as a linear gradient maker or a background gradient tool for a site or a button. The live preview updates as you edit each stop. Everything happens in your browser.

CSS
background: linear-gradient(90deg, #7c3aed 0%, #ec4899 100%);

Color stops

How it works

  1. 1

    Add color stops

    Start from two stops and add, remove or recolor as many as you need.

  2. 2

    Shape it

    Switch between linear and radial and set the angle to aim the gradient.

  3. 3

    Copy the CSS

    Copy the generated background CSS and paste it straight into your stylesheet.

Instant & 100% private — nothing is uploaded

Every color is generated and converted right on your own device. Nothing is sent to a server, so there are no waits, no limits, and no copies kept anywhere.

Frequently asked questions

Can I make radial gradients too?
Yes. Toggle between linear and radial. Linear gradients use an adjustable angle; radial gradients radiate from the centre.
How many color stops can I add?
As many as you like. Each stop has its own color and position, and the live preview updates as you edit.
What does the CSS output look like?
A two-stop linear gradient comes out as background: linear-gradient(90deg, #7c3aed, #ec4899); ready to paste straight into your stylesheet. Switch to radial and it uses radial-gradient() instead, with no prefixes needed for modern browsers.
Is the CSS ready to paste?
Yes. The output is a standard background property you can drop directly into your CSS, and it updates the moment you change a stop or the angle.

More tools

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Color Contrast CheckerWCAG AA/AAA pass-fail, color-blind preview and a fix suggestion.Color Blender & ConverterMix two colors into steps and convert HEX, RGB, HSL and OKLCH.Color PickerPick a color, read HEX, RGB, HSL, HSV and CMYK, sample any pixel.HEX to RGB ConverterConvert HEX color codes to RGB, plus HSL, HSV and CMYK.RGB to HEX ConverterConvert RGB values to a HEX code with sliders and a live preview.

More from the Hivly network

Free sister tools on our other sites.

Brand Name GeneratorBrandable names from a keyword, with availability, palette and tagline.Bulk Image CompressorBulk-shrink JPG, PNG and WebP — many images at once.JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.