twitter github facebook

Gradient Background Generator

← All Tools

How to Generate Gradient Background Image and CSS?

  • 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.

Credits

  • 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
  • MMCSS - A minimal modern CSS framework for building beautiful websites