Radial-gradient function
The CSS radial-gradient() function creates an image whose colors transition outward from a central point or shape according to specified color stops.
Web Design Playground, Second Edition
The CSS radial-gradient() function creates a gradient image whose colors radiate outward from a central shape.
- How it is used
- Applies a radial color transition to an element’s background for visual interest and decorative effects.
- How deep it goes
- Defines shape, extent, position, colors, stops, and defaults, then demonstrates a complete CSS rule.
- Examples
- Shows a yellow-to-blue ellipse positioned at the top-left corner and a simpler centered two-color gradient.
- What you can do after
- Apply it via CSS by selecting a shape, extent, position, colors, and optional stops for an element background.
Read how Web Design Playground, Second Edition explains radial-gradient function →
CSS in Depth, Second Edition
The radial-gradient() CSS image function creates a radial gradient with specified colors, shape, size, position, and color space.
- How it is used
- Creates radial background effects and supplies gradient images for masking elements.
- How deep it goes
- Explains defaults, color stops, color space, shape, size, position, repetition, and masking, with examples rather than browser internals.
- Examples
- Uses a white-to-blue element background, visual gradient variants, concentric rings, and a radial vignette mask.
- What you can do after
- Apply it via CSS to build radial backgrounds, repeated rings, positioned highlights, and gradient-based masks.
Read how CSS in Depth, Second Edition explains radial-gradient function →
Related concepts
- color scalekind of · A color scale is a mapping from data values or categories to colors, often arranged as a continuous gradient or discrete set for visual representation.
- color stopuses · A color stop is a specified color at an optional position that defines part of a gradient transition.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.