Gradient Background Generator
Generate Linear and Radial Gradient CSS code and Background Images with custom configuration options.
How Does Gradient Background Generator Work?
Gradient generator is capable of generating linear and radial gradient images that can be used as background images in your design or as wallpaper images. The tool also produces CSS code that can be used to create similar gradient using CSS code on a website. You can easily configure the colors in the gradient and choose the direction and position of the gradient. Downloading the gradient image in PNG as well as JPG files are supported.
You can generate a gradient image of any width and height. By default the tool generates image of size 3000px width and 2000px height. If you are generating background images, then you can also check out our solid color image generator.
How can I change the color of the gradient image?
Using the color picker controls, you can change the colors of the gradient image. You can also input your color in HEX, RGB, HSL or HSV.
Can I pick colors from an image I already have?
Yes, you can expand the color picker control and then click on the eye dropper icon to pick colors from your existing image or your screen. We also recommend using the color extractor tool to pick primary colors from your image.
What size of gradient image can I generate with Gradient Generator?
You can generate image of any width and height. By default our tool generates gradient image of 3000x2000 size. You can generate 1x1 pixel image or go as high as possible as per your requirement.
What are some use cases of a gradient background?
A gradient background can bring in better asthetics when designing a website, mockup or social media image. Using gradients in web design as well as graphic design has been a trend for a long time and would continue to be there.
Can I use your gradient image as wallpaper on my device?
Most certainly, yes! Simply go to screen resolution tester to find out the width and height of your device. Then use those dimensions to create a gradient background image of your choice. Download the PNG or JPG file and set it as your wallpaper.
How to use gradient backgrounds in website?
In order to set gradient as background in website you must use the CSS code provided by the tool.
For example here is a sample CSS code for creating a linear gradient:
background: linear-gradient(315deg, #a7d6c6 0%, #d5a7b7 100%)And here is a sample CSS code for creating a radial gradient:
background: radial-gradient(circle at right top, #216079 , #d3fdb0)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.
- You can also use the color picker control to pick the primary or secondary colors.
- The color input control can also be used to specify value in 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.
- For downloading your gradient as image, you can specify the width and height of the image.
- 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