HandyjarFind a tool

Gradient & pattern images.

Create a background and download a PNG, entirely in your browser.

Settings

Choose a style, customize its colors, then generate.

Image settings

Choose colors with the swatches or enter six-digit hex values.

Output size

Loading controls…

Preview

The exported PNG, fitted here to your screen.

Your image will appear here.
Choose Generate PNG to begin.

No image generated yet.

How it works

A simple process from settings to download.

  1. Choose your style

    Pick a gradient or pattern, then set its colors and output dimensions.

  2. Generate and preview

    Choose Generate PNG to see the actual exported image, fitted to your screen.

  3. Download your PNG

    Save your image, or change the settings and generate another version.

Processed in your browser

Your settings and generated image are not uploaded, logged or saved by this tool. Cancel stops processing; Reset clears the result and restores defaults. Downloads are saved only when you choose Download PNG.

Exact-size PNG output

Exports are opaque, 8-bit sRGB PNGs at the exact requested pixel dimensions. The preview is scaled to fit your screen. Patterns use hard pixel edges; inspect fine or rotated patterns at their original size to see their detail.

Frequently asked questions

Helpful details about colors, patterns and output.

How do gradient colors and angles work?

First and last colors sit at 0% and 100%; the middle color sits at your chosen stop. A linear gradient spans the image projection along its angle: 0° goes left to right, 90° goes top to bottom. Radial gradients start at the center and reach their last color at the corners. Radial mode has no angle control.

What does pattern size change?

It sets each stripe's width, each checker square's side, or the distance between dot centers in pixels before rotation. Dot diameter is half that distance. Stripes alternate first and last colors; checkerboards alternate square colors; dots use the first color on the last-color background. The grid starts at the top-left, and angle rotates its axes clockwise.

Will the same settings give the same image?

Yes, repeating settings in the same browser gives the same pixels. There is no randomness or seed. Browser gradient interpolation and PNG encoding can differ slightly between browsers. Changing settings clears the old preview and download so they always match the last generation.

Are these seamless tiles?

Not automatically. Unrotated stripes and checkerboards tile cleanly when dimensions are multiples of twice the pattern size; unrotated dot grids tile when dimensions are multiples of the pattern size. Rotated patterns and gradients are full background images and are not guaranteed seamless.

How large can I make an image?

Use a current browser that can create PNG images. The largest usable image depends on your browser's canvas limits and available memory. A failed render shows an error; reduce dimensions and try again.

Why does my pattern look different in the preview?

Fine patterns can show moiré or disappear when scaled down. Rotated lines and circles have hard pixel edges that can look stepped. Inspect the PNG at its original size. Equal colors make a solid image, and symmetric patterns can look identical at some angles.

Continue with Resize image or Convert image.