How to Use Gradient Background Generator?

  • The tool above will present you with a randomly generated gradient background at start.
  • You can change the primary or secondary color used in the gradient by entering the color value in HEX, RGB, HSL or HSV.
  • Gradient type can be switched between a linear gradient or a radial gradient using the radio button.
  • Depending on the gradient type selected, you can then change the direction or position of the gradient colors.
  • CSS code to generate the gradient will be automatically updated based on your choices. You can click on 'Copy' button to copy the code.
  • Once you have created the desired gradient, choose to download image as PNG (high-quality) or a JPG image.
  • If the gradient image opens in a new tab, instead of downloading, right click and do "Save As" to save the background image.
  • We do not store any of the gradients you create and everything is done inside your browser.

About Gradient Background Generator

Generate Linear and Radial Gradient CSS code and Background Images with custom configuration options.


  • vue.js - The Progressive JavaScript Framework
  • TinyColor - Fast, small color manipulation and conversion for JavaScript
  • highlight.js - Syntax highlighting for the Web
  • clipboard.js - A modern JavaScript library to copy text to clipboard
  • download.js - Client-side file downloading using JS and HTML5 by dandavis