Gradient Background

Choose the gradient type and the colors, then pick the image size and press "Download PNG" or "Download JPG". The preview on the screen is a scaled-down copy of what the file will contain.

Gradient types

• Linear — the colors change along a straight line, and the angle sets the direction: 0° goes from bottom to top, 90° from left to right.
• Radial — the colors spread in circles from the center toward the corners.
• Conic — the colors go around the center like on a color wheel, and the pattern wraps back on itself.
• Soft — each color has its own point, and the colors spread from it as blobs that blend smoothly. Drag the points with the mouse, and the "Softness" slider makes the blobs wider.

Colors

A gradient holds from two to six colors. Ready-made sets apply with one click on a tile, "Random" picks neighboring shades on the wheel, and "Reverse" flips the order of the colors. The soft gradient blends colors the way light blends, so no gray band appears between blue and yellow.

Size

Preset sizes: 1920 × 1080 for a presentation or desktop wallpaper, 4K, a 1080 × 1920 phone wallpaper, a square and a 4:5 social media post, and a 1280 × 720 video cover. A custom size can be up to 8000 pixels per side. PNG keeps the gradient lossless, while JPG weighs less.

CSS code for a website gradient is built by the CSS gradient generator.