The preview follows the exported composition
The workspace shows the whole image at its chosen aspect ratio. Export renders the same stop colors, positions and geometry at full output dimensions, so a square or wide composition keeps its framing.
ONELESS / COLOR
Gradient Generator
Sometimes the next tool needs an image rather than a line of CSS. Gradient Generator creates a flat color background at the exact pixel dimensions you choose. Build a linear sweep or a centered circular glow, arrange the color stops and download the composition as an opaque PNG without uploading anything.
Open Gradient Generator. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
Color, with a little context.
Positions can make soft blends or hard edges
Stops are sorted by percentage. Equal-position stops retain their insertion order and can create a hard transition. Linear angles follow the CSS convention: 0° upward and 90° toward the right.
A centered radial circle reaches the corners
Radial mode begins at the image center and ends at the farthest corner. On a wide rectangle, the circle extends beyond the short sides. The angle control does not apply in radial mode.
HOW TO USE IT
From a starting point to a usable result.
- Choose Linear or Radial. Select a numbered stop to edit its opaque HEX color and percentage position. Add up to five stops or remove down to two.
- Set the linear angle, then choose a size preset or enter whole-pixel dimensions. Each side must be 16–4096 pixels and the total must stay within 8 megapixels.
- Inspect the full preview and choose Download PNG. The generated file contains the gradient only; interface labels and controls are excluded.
A WORKED EXAMPLE
A two-color horizontal image
Use #000000 at 0% and #FFFFFF at 100%, select Linear and set 90°. A 1200 × 628 PNG runs from black on the left toward white on the right. Canvas samples pixel centers, so boundary pixels may be a fraction inside the mathematical endpoints.
EVERYDAY USES
Make the next small decision easier.
Prepare a slide background
Use a landscape preset, then add the saved image to a slide or document. Check any text against the local background colors.
Make a social graphic base
Choose the social or square preset and download the color layer for use in an image editor. This tool does not add logos, type or illustrations.
LOCAL WORKSPACE
Your work stays in this browser.
The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.
These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.
KEEP IT NEARBY
One less search next time.
Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.
Choose a shortcut icon
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose PinkQUESTIONS, ANSWERED
A few useful details.
How is this different from CSS Gradient Generator?
This tool downloads a raster PNG with exact dimensions. CSS Gradient Generator provides editable CSS with alpha and stop controls for webpages.
Is transparency included?
This image tool accepts opaque HEX colors and produces an opaque PNG. Use the CSS tool when you need transparent stops or an overlay.
Why is the download unavailable?
Check every active field: HEX color, 0–100% position, integer dimensions and the 8-megapixel bound. Invalid settings hide the result and disable download.
Can I export SVG, JPEG or WebP?
This release exports PNG. It does not create meshes, animations or additional file formats. PNG preserves the generated pixel values without lossy compression.
Does resizing the on-screen preview change the downloaded dimensions?
No. The output width and height settings determine the PNG pixel dimensions. The preview scales to the available screen space.
What is the difference between linear and radial output?
A linear gradient follows a direction; a radial gradient spreads outward from its center. Choose the shape based on the composition you need.
How do stop percentages affect the image?
They place each color along the gradient’s progression. Moving stops changes how much space each transition occupies without changing the PNG dimensions.
REFERENCES
ANOTHER SMALL STEP
Keep the next tool close.
Ready for a little more color?
Shape a color atmosphere and save it as an image.
Return to Gradient Generator ↑