How do I create a radial gradient background PNG?

Choose first and second colors, set dimensions, adjust center position and zoom, then download the generated PNG.

Is this a circle gradient generator?

Yes. This tool generates radial gradients from a center point, which works well for gradient circle and circular background styles.

What does center position control?

Horizontal and vertical center controls move the gradient origin as percentages of image width and height.

What does zoom change in radial gradients?

Zoom controls the gradient radius scaling. Higher zoom spreads the transition farther from the center.

Can I use transparency in radial gradients?

Yes. Enable transparency and set per-color transparency percentages for first and second color stops.

Is this a CSS radial gradient generator?

This page exports image files, not CSS code. If you need a CSS radial gradient snippet, use your design editor or devtools after choosing similar colors here.

Are files uploaded to a server?

No. Radial gradient generation runs locally in your browser.

Gradient

Adjust radial gradient options below to generate an image.

Output size: 1200 × 630 px

First color

Second color

Options

Width (px)

Height (px)

Use transparency

Position of center horizontally (%)

Position of center vertically (%)

Zoom (%)

Radial gradient generator for images

Create radial gradient and circle gradient backgrounds with custom size, colors, center position, zoom, and transparency. Export PNG in your browser.

What is an image radial gradient generator?

A radial gradient generator creates a circular or elliptical color transition from a center point outward. This tool lets you set dimensions, colors, transparency, center position, and zoom to generate downloadable PNG assets for radial backgrounds, gradient circles, and circular gradient backgrounds.

Radial and circle gradient features

Controls to create radial background images and download PNG output.

Two-color radial gradient: Set inner and outer colors with picker or hex input.
Custom dimensions: Choose exact width and height in pixels.
Center position controls: Move gradient center horizontally and vertically.
Transparency support: Apply alpha per color stop when needed.
Zoom control: Adjust gradient radius scale.
PNG download: Export generated image as PNG.

How to create a radial background

Generate a circle-style radial gradient image in a few steps.

Pick first and second colors: Set color stops for center and outer area.
Set image dimensions: Define output width and height.
Tune center and zoom: Position the gradient origin and scale radius.
Optional transparency: Enable and adjust transparency percentages.
Download PNG: Save the generated radial gradient image.

Tips for cleaner radial gradients

Practical settings guidance.

Start center at 50/50: Centered gradients are easier to judge before offsetting.
Use dark outer colors for depth: Dark second colors create subtle vignette effects.
Increase zoom for softer falloff: Higher zoom smooths transitions over larger area.

Great for

Common radial gradient use cases.

Spotlight backgrounds: Create center-emphasis backdrops for UI and hero sections.
Poster artwork: Generate dramatic vignette-style color transitions.
Motion and video assets: Prepare still backgrounds for animation and compositing.

Why use this tool

Fast client-side radial gradient generation.

No upload required: Everything renders locally with Canvas.
Precise control: Adjust center and radius with percentage sliders.
Instant feedback: Preview updates immediately while tuning values.
Free PNG output: Download ready-to-use gradient images.

Technical details

Rendering implementation summary.

Engine: Canvas 2D `createRadialGradient`.
Center math: Center position computed from horizontal/vertical percentages.
Radius scaling: Radius based on image diagonal and zoom percentage.
Output limit: Maximum 8192 px per edge.
Export format: PNG data URL download.

Frequently Asked Questions

Have questions? We have answers.

More tools from Image & Conversion.

View all Image & Conversion