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".
| Width: | px |
| Vertical Width: | px |
| Hue: | ° |
| Saturation: | % |
| Brightness: | % |
| Direction: | ° |
| HSV after change: |
H 258.8°
S 79.7%
V 58%
|
| 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.
| GradationWidth | You can specify the width of the gradation between 10px and 400px. |
|---|---|
| GradationVertical Width | You can specify the vertical width of the gradation between 10px and 300px. |
| Hue | You can specify the amount of change from the original hue between -180° and + 180°. |
| Saturation | You 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. |
| Brightness | You 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. |
| Direction | Specifies 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 change | You 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 Width | You can specify the width of the created gradation image between 10px and 3000px. |
|---|---|
| Image Height | You 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.
