radial-gradient()
A transition between colors from a center outwards.
Syntax
radial-gradient(shape at position, color stop, …)Parameters
| Parameter | Type | Description |
|---|---|---|
| shape | circle | ellipse | `circle` or `ellipse` (the default). |
| at position | position | Where the center is: `at top left`, `at 30% 30%`. |
| color stop | color length | A color and optionally its position. |
Examples
A radial gradient, a "glossy ball" and a pie chart made with conic-gradient():
<style>
div { width: 120px; height: 120px; display: inline-block; margin: 4px; }
</style>
<div style="background: radial-gradient(white, steelblue);"></div>
<div style="background: radial-gradient(circle at 30% 30%, white, crimson 60%, darkred);"></div>
<div style="background: conic-gradient(gold 0 25%, teal 0 60%, tomato 0); border-radius: 50%;"></div>Notes
conic-gradient() changes colors around a center, like clock hands — handy for pie charts and color wheels.
See also
- linear-gradient() — A smooth transition between colors along a straight line — used as a background image.
- background-image — One or more background images: files or gradients.
Related recipes
In the tutorial
- Shadows and gradients — Block and text shadows — box-shadow and text-shadow, linear and radial gradients, color stops.