Generate Linear and Radial SVG Gradient Backgrounds

Build linear or radial SVG gradients with multiple stops-download vector-ready backgrounds in seconds.

Workshop

Gradient type:

Angle: °

Width: px

Height: px

Tip: You can also customize width and height anytime by editing the downloaded SVG code.

%

%

Gradient presets (click to apply):

Result

Other tools you may like

Generate SVG gradients for web and design use. You can create linear or radial gradients with multiple color stops, angle, and dimensions.

Everything runs in your browser and no files are uploaded.

Need a guide? Read our tutorial: How to Make SVG Gradient Backgrounds

How to Use?

Choose linear or radial gradient type.
For linear mode, adjust angle direction.
Add or remove color stops.
Adjust each stop offset percentage.
Set output width and height.
Download the generated SVG file.

Notes:

SVG is vector-based and scales without quality loss.
Downloaded SVG can be used in web pages and design tools.
At least 2 color stops are required.
Maximum output size is 5000px × 5000px.