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:
<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:
<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:
Author
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
If you have any doubts regarding this article (SVG Radial Gradients), please comment here. I will help you immediately.