Why use gradients in SVG?

Gradients transform your SVG graphics, adding depth and dynamism with smooth transitions between colors. In our previous tutorials, you learned how to create primitive shapes like circles and rectangles, polylines, and how to work with vectors in <path>. We also explored how to insert images, videos, move SVG elements, color them with fill and stroke, and include embedded CSS/JavaScript (Learn more about SVG graphics). Now, it is time to master gradients, an essential technique for modern designs.

An SVG gradient is defined inside the <defs> tag and applied to elements like circles, rectangles, or paths using a unique identifier in fill="url(#grad)". You can use software like Adobe Illustrator or Inkscape, but they require experience. In this guide, you will learn more accessible methods: from creating gradients with code to using visual tools like creadorlogos.com. Read on!

Types of gradients in SVG

Before diving into code, let's explore the most used types of gradients in SVG and design. Some are native in SVG, while others (like conical) require CSS alternatives or simulations.

• Linear Gradient (<linearGradient>): Color transition along a straight line.
• Radial Gradient (<radialGradient>): Transition from the center outwards, like a circle.
• Conical Gradient (conic-gradient): Circular transition, like a wheel (not native in SVG, but can be simulated).
• Multicolor Gradient: Uses multiple color stops in a linear or radial gradient.
• Gradient with Transparencies: Applies transparency to colors for fade-out effects.

Next, we will see how to implement each one with code and visual examples.

Creating gradients with <linearGradient> and <radialGradient>

The most direct way to apply gradients in SVG is by defining a <linearGradient> or <radialGradient> inside a <defs> tag. Then, apply it to an element with fill="url(#id)". Here is how to do it for each type.

Linear Gradient (<linearGradient>)

A linear gradient transitions colors along a straight line. Define start and end points with x1, y1, x2, y2, and use <stop> for colors. Let's break down this code step by step for beginners.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</svg>

Step-by-Step Code Breakdown:

• <svg>: This is like the canvas where we draw our design. Defines the area where everything appears. Here we set it to 200x200 pixels using viewBox="0 0 200 200".
• <defs>: A container for definitions. Elements placed here are not drawn directly but can be reused, like gradients, filters, or patterns.
• <linearGradient>: Defines a linear gradient, which is a straight-line color transition.
• id="grad1": A unique identifier, like a special name for this gradient, used later to apply it to shapes.
• x1="0%" y1="0%": Starting point of the gradient at the top-left corner.
• x2="100%" y2="0%": Ending point of the gradient at the top-right corner.
• <stop>: Defines color transition points along the gradient ramp.
• offset="0%": Position where this color begins (0% of the line).
• stop-color="red": Starts with red.
• offset="100%": Position where this color ends (100% of the line).
• stop-color="blue": Ends with blue, creating a smooth transition from red to blue.
• <rect>: Draws a rectangle on the canvas using the gradient via fill="url(#grad1)".

Linear Gradient Variations

By changing x1, y1, x2, y2 values, you can make the gradient horizontal, vertical, or diagonal:

• Horizontal: Use x1="0%" y1="0%" x2="100%" y2="0%".
• Vertical: Change to x1="0%" y1="0%" x2="0%" y2="100%".
• Diagonal: Use x1="0%" y1="0%" x2="100%" y2="100%".

Visual Examples

Radial Gradient (<radialGradient>)

A radial gradient transitions colors from a center point outward. Use cx, cy, r to define the center and radius.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad2)" />
</svg>

• <radialGradient>: Creates a gradient expanding outward from the center in circles.
• cx="50%" cy="50%": Center of the gradient right in the middle of the canvas.
• r="50%": Radius determining how far colors extend from the center.

Visual Example

Radial Gradient Variations

By changing cx, cy, r values, you can adjust center position and reach:

• Displaced center: Use cx="25%" cy="25%" r="50%" to shift the center toward the top-left corner.
• Small radius: Use cx="50%" cy="50%" r="25%" to concentrate the gradient closer to the center.
• Large radius: Use cx="50%" cy="50%" r="75%" to extend the gradient further toward the edges.

Visual Examples

Multicolor Gradient

You can add multiple <stop> elements to create gradients with more than two colors.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad3">
      <stop offset="0%" stop-color="red" />
      <stop offset="33%" stop-color="yellow" />
      <stop offset="66%" stop-color="green" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad3)" />
</svg>

Step-by-Step Explanation for Beginners

• <linearGradient>: Creates a straight-line color transition.
• offset="0%" stop-color="red": Starts with red at the beginning (0%).
• offset="33%" stop-color="yellow": Transitions to yellow at one-third of the way (33%).
• offset="66%" stop-color="green": Transitions to green at two-thirds of the way (66%).
• offset="100%" stop-color="blue": Ends with blue at the finish (100%).

Visual Example

Gradient with Transparencies

Use stop-opacity to add transparency to colors, creating fade-out effects.

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="200" height="200" fill="white" />
  <defs>
    <radialGradient id="grad4">
      <stop offset="0%" stop-color="purple" stop-opacity="1" />
      <stop offset="100%" stop-color="purple" stop-opacity="0" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad4)" />
</svg>

Step-by-Step Explanation for Beginners

• <rect>: A rectangle covering the entire canvas, painted white as a background.
• offset="0%" stop-color="purple" stop-opacity="1": At the center (0%), purple is fully visible (opacity 1).
• offset="100%" stop-color="purple" stop-opacity="0": At the edges (100%), purple becomes invisible (opacity 0), fading out.
• <circle>: Draws a circle centered at (100, 100) with a 90-pixel radius.

Visual Example

Modifying gradients with JavaScript

You can manipulate colors and stop points (<stop>) dynamically using JavaScript by selecting elements by their ID and changing their color or position attributes in real time.

Coloring with gradients on creadorlogos.com

If you prefer to avoid editing complex code and stop points, at creadorlogos.com you can apply linear and radial gradients completely visually, choosing directions, angles, and multiple colors with a couple of clicks to download your production-ready logo.

Simulating conical gradients in SVG

Although native SVG does not include a direct tag for conical gradients (like a color wheel), these can be simulated efficiently by overlapping multiple vector paths or through advanced masks and embedded CSS filters.