SVG Gradient Generator

Create beautiful linear and radial gradients for your SVG graphics. Edit colors, stops, and angles visually, then copy the ready-to-use SVG code.

SVG Gradient Generator & Editor

Create and customize linear or radial gradients for SVG graphics

Gradient Type

Direction: 90°

0°90°180°270°360°

Color Stops

Preview

Click "Generate Gradient" to preview

About SVG Gradients

SVG supports two types of gradients: linear (colors transition along a line) and radial (colors transition from a center point outward). Gradients are defined in the <defs> section and referenced using fill="url(#gradientId)".

Color stops define the colors and their positions along the gradient. You can add multiple stops to create complex gradient effects. Opacity can be adjusted for each stop independently.

How the SVG Gradient Generator Works

This tool creates SVG gradient definitions (<linearGradient> and <radialGradient>) through a visual interface. Pick colors, adjust stop positions, set angles or center points, and get ready-to-use SVG gradient code.

Gradients in SVG are defined in a <defs> block, then referenced by shapes via fill="url(#gradientId)". The generator builds this structure for you - no need to memorize the syntax for gradient stops, offsets, and color interpolation.

Gradient types supported:

Linear gradients - color transitions along a straight line (horizontal, vertical, diagonal)
Radial gradients - color transitions radiating from a center point (circles, ellipses)
Multiple color stops - add as many colors as needed along the gradient
Opacity stops - control transparency at each point, not just color
Gradient units - userSpaceOnUse or objectBoundingBox scaling

Adjust the angle for linear gradients (0° = left to right, 90° = top to bottom). For radial gradients, move the center point (cx, cy) and focal point (fx, fy) to create offset lighting effects. Preview updates in real-time as you tweak settings.

When You'd Actually Use This

Creating button hover states

Flat buttons feel dull. Add a subtle linear gradient from #4F46E5 to #3730A3 for depth. Generate the gradient, apply to your button SVG, and it instantly looks more tactile.

Designing icon sets with consistent lighting

Your icon set needs a cohesive look. Create one radial gradient simulating top-left lighting, apply it to all icons. Consistent gradients make individual icons feel part of a family.

Building background patterns

Subtle gradient backgrounds add polish without distraction. Generate a soft diagonal gradient from near-white to slightly off-white. Use it as a section background in your landing page.

Simulating metallic or glossy effects

Metallic surfaces need complex gradients with multiple stops. Add a highlight stop at 30%, base color at 50%, shadow at 70%. Radial gradients work well for spherical metallic objects.

Creating sky or water effects in illustrations

Natural gradients rarely go from color A to color B directly. Skies transition through multiple blues. Build a 4-stop gradient for realistic atmospheric effects in vector illustrations.

Prototyping UI elements quickly

Need a gradient for a mockup? Don't open Figma. Use this generator, tweak until it looks right, copy the SVG code into your prototype. Faster context switching.

What to Know Before Using

Gradient IDs must be unique.If you're generating multiple gradients for one SVG, each needs a unique id attribute. The generator may use generic names like "grad1" - rename them to avoid conflicts when combining.

Color interpolation method matters.SVG gradients interpolate in RGB space by default. For more natural color transitions, add color-interpolation-filters="sRGB". Some generators offer this as an option.

Gradient units affect scaling.gradientUnits="objectBoundingBox" (default) scales the gradient relative to the shape. userSpaceOnUse uses absolute coordinates. Choose based on whether you want consistent gradients across different-sized shapes.

Browser support is excellent but not perfect.All modern browsers support SVG gradients. However, very old browsers (IE9 and earlier) don't. For critical graphics, provide a solid-color fallback.

Pro tip: For subtle depth, use gradients with minimal color difference - like #FFFFFF to #F5F5F5. The eye perceives it as lighting rather than an obvious gradient.

Common Questions

Can I animate SVG gradients?

Yes, animate the stop-color or offset attributes of gradient stops using SMIL (<animate>) or CSS animations. Create color-shifting effects or moving highlight positions.

How do I reuse a gradient across multiple shapes?

Define the gradient once in <defs>, give it an id like "myGradient", then reference it with fill="url(#myGradient)" on any shape. One definition, unlimited uses.

What's the difference between linear and radial gradients?

Linear gradients transition along a line (defined by x1, y1, x2, y2). Radial gradients radiate from a center point (cx, cy) outward. Use linear for surfaces, radial for spheres or spotlights.

Can I create striped or patterned gradients?

Not with standard gradients - they always smooth-interpolate between stops. For stripes or patterns, use SVG <pattern> elements instead. Patterns tile; gradients blend.

How many color stops can I add?

Technically unlimited, but 5-10 stops is practical. Beyond that, gradients become muddy and file sizes grow. If you need complex color transitions, consider using multiple overlapping gradients or patterns.

Can I export gradients for use in CSS?

This tool outputs SVG gradient definitions. For CSS gradients, use a CSS gradient generator instead. The concepts are similar but syntax differs - SVG uses <stop> elements, CSS uses linear-gradient() functions.

Why does my gradient look banded?

Color banding happens when there aren't enough intermediate colors. Add more stops between existing ones, or use dithering techniques. Also check your display - some monitors show more banding than others.

Other Free Tools

Search tools

SVG Gradient Generator