facebook twitter github smile-o hacker-news medium reddit-alien Slice 2 Copy

Gradient Background Generator

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.


  • 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