Configure your gradient
Set colors and click Generate// build svg gradient definitions with color stops
Create SVG gradient definitions with color stops for linear, radial, and conic gradients. Export ready-to-use SVG defs for icons, illustrations, and UI elements.
Configure your gradient
Set colors and click GenerateSelect linear, radial, or conic from the type tabs at the top of the controls.
Add stops, pick colors, set opacity and position. Drag positions to fine-tune.
Click Generate to preview. Copy the SVG defs, CSS fill, or download as a standalone .svg file.
The SVG Gradient Generator builds native SVG <linearGradient>, <radialGradient>, and <pattern> definitions with precise color stop control. Unlike CSS gradients, SVG gradients work inside <defs> blocks and can be referenced by any SVG element via fill="url(#id)".
SVG gradients are defined inside <defs> blocks and referenced by ID via fill="url(#id)". They work across SVG elements regardless of browser CSS support quirks, can be applied to strokes, and embed directly inside SVG markup — making them ideal for icons and illustrations that need self-contained gradient fills.
The spreadMethod controls how the gradient fills space outside its defined range. pad extends the last color stop; repeat tiles the gradient; reflect mirrors it on each repeat. This is especially visible with radial gradients when the radius doesn't cover the full shape.
Yes — but with a caveat. You can inline the SVG as a data URI in CSS: background-image: url("data:image/svg+xml,...");. The generated CSS fill output in this tool provides exactly that format. It's ideal for small decorative elements where a separate file would be overkill.
SVG supports any number of <stop> elements. This tool allows up to 10 stops for practical usability. For most design use cases, 2–5 stops produce the best visual results without creating overly complex gradient math.
A conic (or conical) gradient sweeps colors around a center point, like a color wheel. In SVG this is approximated using a series of radial elements or a custom pattern. The generated output uses a pattern-based approach with angular stops that works across modern SVG renderers.
Yes — that's one of SVG gradients' biggest advantages. Define the gradient once in <defs> and reference it from any number of elements with fill="url(#yourId)" or stroke="url(#yourId)". Changing the definition updates all referencing shapes instantly.
Yes. gradientUnits="objectBoundingBox" (default) positions stops as percentages of the shape's bounding box, so the gradient scales with the shape. userSpaceOnUse uses absolute SVG coordinates — useful when you want consistent pixel sizing across multiple shapes in the same viewport.
Use the opacity slider on each color stop in this tool. It sets the stop-opacity attribute (0–1) in the output. You can also encode opacity directly in the color using 8-digit hex or rgba() values, though stop-opacity is the canonical SVG approach and has better cross-browser support.
An SVG Gradient Generator is a browser-based tool that constructs native SVG gradient definitions — the <linearGradient>, <radialGradient>, and conic pattern blocks that live inside an SVG's <defs> section. Unlike CSS gradient generators that output background-image values, this tool produces self-contained SVG markup that can be embedded directly in HTML or used as a standalone .svg file.
💡 Looking for premium SVG templates and UI kits to accelerate your design workflow? MonsterONE offers unlimited downloads of icons, illustrations, and UI components — worth checking out.
CSS gradients (linear-gradient(), radial-gradient()) are perfect for background fills on HTML elements. But when you're working with SVG shapes, paths, or icons, SVG-native gradients are often the better choice for several reasons:
stroke="url(#gradient)" applies a gradient along an outline or path stroke.gradientUnits="objectBoundingBox", the gradient scales exactly with the shape regardless of viewport size.Color stops are the foundation of any gradient. Each <stop> element defines a color at a specific position along the gradient axis. The two mandatory attributes are:
offset — a value from 0 to 1 (or 0% to 100%) defining where on the gradient axis this color appears.stop-color — the color at that position, accepting any CSS color value including hex, rgb, hsl, and named colors.A third optional attribute, stop-opacity, controls the transparency of a stop from 0 (fully transparent) to 1 (fully opaque). This is different from the alpha channel in the color value — both are supported, but stop-opacity is more universally supported across SVG renderers and design tools.
A <linearGradient> transitions colors along a straight line defined by coordinates x1, y1, x2, y2. With gradientUnits="objectBoundingBox", the points are percentages of the shape's bounding box. The angle control in this tool translates a human-readable degree value into the corresponding x1/y1/x2/y2 coordinates using trigonometry.
For example, a 45° linear gradient results in x1="0" y1="0" x2="1" y2="1" (top-left to bottom-right). A 90° gradient is x1="0" y1="0" x2="0" y2="1" (top to bottom). The generator handles all these conversions automatically.
A <radialGradient> radiates outward from a center point (cx, cy) with a given radius (r). The focal point (fx, fy) defines where the gradient actually starts — offsetting the focal point from the center creates asymmetric, lens-like gradient effects that are impossible with CSS radial gradients.
Common uses for radial gradients include button glow effects, circular icon highlights, spotlight overlays, and 3D shading simulations on round shapes.
While CSS now has conic-gradient(), SVG does not have a native conic gradient element. To replicate the effect, this generator uses a pattern-based approach with rotated linear gradient segments arranged around a center point. The result closely mimics a true conic gradient and renders consistently across all major SVG renderers.
Conic gradients are useful for color wheels, pie chart fills, progress ring indicators, and angular glow effects on dark backgrounds.
When a gradient's coordinate range doesn't fill the entire shape, spreadMethod controls what happens in the unfilled area:
For most icon and illustration use cases, pad is correct. Use repeat or reflect when creating textured or patterned fills with tight gradient bands.
Once you have the SVG defs output, there are three common ways to use it:
<defs> block directly inside an <svg> tag in your HTML file and reference it with fill="url(#yourId)". This is the most flexible method and supports all gradient types..svg file. Embed it with <img src="gradient.svg"> or as a CSS background image.background-image, mask-image, or CSS content properties. This is ideal for decorative elements in CSS-only contexts.Keep these tips in mind when working with SVG gradients in production:
id for each gradient to avoid conflicts in large SVG files.<defs> block at the top of the SVG for maintainability.gradientTransform to rotate or skew a gradient without changing its coordinate system.