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.
- highlight.js - Syntax highlighting for the Web
- download.js - Client-side file downloading using JS and HTML5 by dandavis
- MMCSS - A minimal modern CSS framework for building beautiful websites