Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

SVG Radial Gradients

Posted in SVG Tutorial
Updated on May 19, 2024
By Mari Selvan
👁️ 47 - Views
⏳ 4 mins
💬 1 Comment
SVG Radial Gradients

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
Copy To Clipboard
<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
Copy To Clipboard
<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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy