Solid Color Background Images Maker Online

Online solid color background image creation tool, supporting the creation of solid color background images, linear gradient background images, radial gradient background images, and conic gradient background images. The background image produced supports downloading images in JPEG, PNG, WebP, and SVG formats.

1. The color format filled in this tool is in RGB format, such as rgba(255,0,138,0.5). The absolute length format supported by this tool is 5px. The percentage length format supported by this tool is 33.5%.
2. Basic : Set the basic parameters for creating background images.
   1. Type : Select the type of background image, supporting solid color background image, linear gradient background image, radial gradient background image, conical gradient background image, and custom background image.
   2. Size : Background image size, format is width,height , in pixels. The width of the image shall not exceed 65535, the height of the image shall not exceed 65535, and the total area of the image shall not exceed 16384 x 16384.
   3. Format : Select the format for downloading the background image, supporting JPEG, PNG, WebP, and SVG formats. The SVG format generated by this tool is displayed using foreignObject embedded HTML objects.
3. Solid Color : Set parameters related to solid color background images.
   1. Color : Select or fill in the color of the solid background image, in the format of RGB color.
4. Linear Gradients : Set parameters related to linear gradient background image.
   1. Angle : The direction of a linear gradient, measured in degrees (°), with a range of [-360,360].
   2. Repeat : Is the linear gradient repeated.
   3. Color : Linear gradient colors, supporting at least 2 colors. Each color supports setting optional stop positions, which can be filled in percentage length or absolute length. Location supports filling in one or two values.
5. Radial Gradients : Set radial gradient background image related parameters.
   1. Shape : Select the radial gradient shape that supports both circle and ellipse shapes.
   2. Size : Choose the size of the radial gradient. If you select custom, you need to manually fill in the value. Custom size for radial gradient shapes, with a circle filled with one value (absolute length) and an ellipse filled with two values separated by spaces (absolute length or percentage length).
   3. Center : The center of the radial gradient, two values separated by spaces, optional. Support filling in absolute length or percentage length.
   4. Repeat : Is the radial gradient repeated.
   5. Color : The color of the radial gradient supports at least 2 colors. Each color supports setting optional stop positions, which can be filled in percentage length or absolute length. Location supports filling in one value.
6. Conic Gradients : Set the parameters related to the conic gradient background image.
   1. Angle : The starting angle of the conic gradient, with a range of [-360,360], optional.
   2. Center : The center of the conical gradient, fill in two values separated by spaces, support percentage length and absolute length, optional.
   3. Repeat : Is the conical gradient repeated.
   4. Color : The color of the conical gradient supports at least 2 colors. Each color supports setting optional stop positions, which can be filled in percentage length or angle. Location supports filling in one value. The format for filling in angle is 45deg.
7. Custom : Set custom background image related parameters.
   1. Fill in a custom CSS rule with the class name set_bg and generate a background image.
8. Generate : Generate a background image based on the set parameters.
9. Download : Download the generated background image in the selected image format to the local device.
10. Clear : Clear the generated background image.