SVG Gradient Generator
Generate an SVG linear gradient between two colours at any angle, as a ready-to-use rectangle with an embedded gradient definition.
Last reviewed by the Radiatus Cloud team
Generate a linear gradient rectangle as SVG code.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Generate linear gradients as SVG
A linear gradient blends smoothly from one colour to another across a shape, a staple of modern backgrounds and buttons. This generator creates an SVG rectangle filled with a two-colour gradient at the angle you choose, embedding the gradient definition so the code is fully self-contained. An angle of ninety degrees runs the blend top to bottom, zero runs it left to right, and any value in between tilts it diagonally.
The gradient is defined once and applied to the rectangle, which you can resize or restyle while keeping the blend intact.
Using SVG gradients
SVG gradients render crisply at any size and can be reused as fills for other shapes by referencing the same definition. Compared with a bitmap gradient, the SVG version is tiny and stays smooth without banding. You can use the result as a hero background, a card header or a decorative panel, and swapping the two colours or the angle is a one-line edit.
The output works anywhere SVG is supported and needs no external files. Everything is generated locally in your browser.
Notes
This SVG Gradient Generator tool runs entirely in your browser, so nothing you enter is uploaded or stored on a server. The generated output is plain, standards-compliant code that you can copy, paste, edit and reuse freely in your own projects, documents and designs without any attribution or sign-up.
Related tools
- EXIF Viewer — Extract hidden EXIF data (Camera, GPS, Settings) from images.
- Favicon Generator — Generate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
- Placeholder Image Generator — Generate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.
- Image Resizer — Resize images in your browser with aspect ratio control and format conversion. Files are processed locally and never uploaded.
Frequently Asked Questions
What does the angle control?
The direction of the blend. Ninety degrees runs top to bottom, zero runs left to right, and other values tilt the gradient diagonally.
Is the gradient self-contained?
Yes. The gradient definition is embedded in the SVG, so the code works on its own with no external references.
Why use an SVG gradient over an image?
It is far smaller, stays perfectly smooth at any size, and can be edited as text or reused for other shapes.
Can I reuse the gradient on other shapes?
Yes. Reference the same gradient id in another shape fill to apply the identical blend.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Pick the two colours, angle and size, then generate.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
EXIF Viewer
ImageExtract hidden EXIF data (Camera, GPS, Settings) from images.
Favicon Generator
ImageGenerate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
Placeholder Image Generator
ImageGenerate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.