Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML5 tag
The <radialGradient> HTML5 tag is used to create radial gradients in SVG graphics. It defines a smooth color transition that radiates from a center point outward in a circular pattern, making it perfect for creating lighting effects, shadows, and visual depth in SVG elements.
Syntax
<radialGradient id="gradientId" cx="centerX" cy="centerY" r="radius">
<stop offset="percentage" style="stop-color:color; stop-opacity:opacity"/>
<stop offset="percentage" style="stop-color:color; stop-opacity:opacity"/>
</radialGradient>
Key Attributes
- cx, cy: Center point coordinates of the gradient (default: 50%)
- r: Radius of the gradient (default: 50%)
- fx, fy: Focal point coordinates for gradient focus
- gradientUnits: Coordinate system ("objectBoundingBox" or "userSpaceOnUse")
Example: Radial Gradient Ellipse
This example creates an ellipse with a radial gradient that transitions from transparent gray at the center to solid blue at the edges:
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
transform: translateX(-40%);
}
</style>
<title>SVG Radial Gradient</title>
<meta charset="utf-8" />
</head>
<body>
<h2 align="center">HTML5 SVG Radial Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
</svg>
</body>
</html>
Multiple Color Stops Example
Create more complex gradients using multiple color stops:
<svg height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="multiGradient" cx="50%" cy="50%" r="80%">
<stop offset="0%" style="stop-color:yellow; stop-opacity:1"/>
<stop offset="50%" style="stop-color:orange; stop-opacity:1"/>
<stop offset="100%" style="stop-color:red; stop-opacity:1"/>
</radialGradient>
</defs>
<circle cx="100" cy="100" r="80" style="fill:url(#multiGradient)" />
</svg>
Comparison: Radial vs Linear Gradients
| Feature | Radial Gradient | Linear Gradient |
|---|---|---|
| Direction | Circular/Elliptical | Straight line |
| Center Point | cx, cy attributes | x1, y1, x2, y2 attributes |
| Use Cases | Lighting effects, buttons | Backgrounds, borders |
Browser Compatibility
The <radialGradient> tag is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It's part of the SVG 1.1 specification and widely compatible.
Conclusion
The <radialGradient> tag provides powerful gradient capabilities for SVG graphics. Use it with multiple color stops and proper positioning to create visually appealing effects in your web applications.
295 Views
