Gradation Generator

Gradation materials used for WEB, homepage, wallpaper background, etc. can be created automatically.
You can easily create a gradation material by setting the color, size, direction, etc., and changing the changing hue, saturation, brightness, etc.
All can be created on the browser and downloaded as JPG or PNG.
You can freely use the created gradation for free.

Gradation creation screen

Select a color by color with the color picker on the left. Based on this color, you can change the hue, saturation, brightness, orientation, etc. to create a gradation.
If you click "Create JPG" or "Create PNG", a JPG image or PNG image will be generated below, so please save and use it.
The size of the created image is the set width and height, but you can also change the size by changing the image width and image height of "Created image size".

Config
Image Size
Create PNG
Create JPG
Width: px
Vertical Width: px
Hue: °
Saturation: %
Brightness: %
Direction: °
HSV after change:
H 323.5°
S 51.7%
V 56.1%
Image Width: px
Image Height: px

Gradation Image File

How to use automatic gradation creation

Color selection

Select the original color to use for the gradient from the color picker on the left.
In addition to clicking the palette to select a color, you can also specify the RGB color code directly or by entering the HSV value.
Gradation is created with this color and the color whose hue, saturation, brightness, etc. are changed in the settings.

Gradation settings

You can change the amount, size, and direction of changes in hue, saturation, and brightness from the original color of the gradient.
Numerical input can also be changed by moving the bar with range input.

Gradation
Width
You can specify the width of the gradation between 10px and 400px.
Gradation
Vertical Width
You can specify the vertical width of the gradation between 10px and 300px.
HueYou can specify the amount of change from the original hue between -180° and + 180°.
SaturationYou can specify the amount of change from the original saturation between -100% and + 100%.
If it is 0 or less, it will be 0, and if it is 100 or more, it will be 100.
BrightnessYou can specify the amount of change from the original brightness between -100% and + 100%.
If it is 0 or less, it will be 0, and if it is 100 or more, it will be 100.
DirectionSpecifies the orientation of the gradient.
Rotate counterclockwise by an angle, with 0 degrees to the right toward the color that changed from the original color.
HSV after changeYou can see the HSV in the changed color.

Image Size

When creating a gradient image, you can resize the image.
If the created image is too large to fit, it will be displayed smaller to fit the screen, but if you save it, it will be saved as a larger image.

Image WidthYou can specify the width of the created gradation image between 10px and 3000px.
Image HeightYou can specify the vertical width of the created gradation image between 10px and 3000px.

Convert to image

Click "Create JPG" or "Create PNG" to create a JPG image and a PNG image below, respectively. Right-click to save and use the gradation.