SVG Radial Gradients

Posted in SVG Tutorial

Updated on May 19, 2024

By Mari Selvan

👁️ 43 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

Radial gradients in Scalable Vector Graphics (SVG) provide a way to create smooth transitions between colors radiating from a central point. These gradients are commonly used to add depth, dimension, and visual interest to graphics.

In this guide, we'll explore the syntax, attributes, and practical applications of SVG radial gradients.

💡 Syntax

To define a radial gradient in SVG, the <radialGradient> element is used within a <defs> section, followed by applying it to an element via the fill attribute. Here's the basic structure:

Syntax

Copied

<svg>
  <defs>
    <radialGradient id="gradientID">
      <stop offset="percentage" stop-color="color" />
      <!-- Add more stop elements as needed -->
    </radialGradient>
  </defs>
  <rect x="x-coordinate" y="y-coordinate" width="width" height="height" fill="url(#gradientID)" />
</svg>

🧰 Attributes

id: A unique identifier for the gradient that allows it to be referenced by other elements.
cx: The x-coordinate of the center of the gradient (default is 50%).
cy: The y-coordinate of the center of the gradient (default is 50%).
r: The radius of the gradient (default is 50%).
fx: The x-coordinate of the focal point of the gradient (optional).
fy: The y-coordinate of the focal point of the gradient (optional).
stop elements: Define the colors and positions in the gradient with offset (percentage) and stop-color (color value).

📄 Example

Let's create an SVG rectangle with a radial gradient fill:

index.html

Copied

<svg width="200" height="200">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</svg>

🧠 How it works?

In this example, we define a radial gradient that transitions from transparent white at the center to solid blue at the edges. This gradient is then applied to a rectangle.

🎉 Conclusion

SVG radial gradients are powerful tools for adding sophisticated color transitions to your web graphics. By mastering their syntax and attributes, you can create visually stunning effects that enhance the overall aesthetic of your designs.

Experiment with different colors, stops, and configurations to discover the full potential of SVG radial gradients.