radialgradient

Radial gradient is a type of image gradient in which colors radiate from a central point outward in a circular or elliptical pattern. The center acts as the focal point, and color stops determine how colors blend toward the outer edge. The result is a smooth transition from the center color to the surrounding colors, which can be defined with multiple stops and transparency.

In CSS, radial-gradient is a function that creates an image containing a radial gradient. The syntax allows an optional shape (circle or ellipse), an optional size indicator, and a center position, followed by one or more color stops. Example: radial-gradient(circle at 50% 50%, red 0%, orange 40%, yellow 100%). This creates a circular gradient centered in the element, transitioning through the specified colors. Color stops may specify exact positions or use keywords; alpha values can make edges transparent for overlays.

In SVG, radial gradients are defined with a radialGradient element inside a defs block. Attributes such as cx, cy, and r designate the gradient's center and radius, and stops specify the colors at offsets from 0 to 1. SVG gradients can be applied as fills to shapes and can be transformed with gradientTransform.

Common uses include decorative backgrounds, soft lighting, depth cues, and visual emphasis in web design and interface graphics. For performance, keep gradient complexity reasonable and avoid excessive large gradients on animated or frequently repainted regions. Cross-browser compatibility is generally good in modern engines; older implementations may require vendor prefixes.