CSS Function
radial-gradient()
The radial-gradient() function creates a gradient image radiating from a center point outward in an elliptical or circular shape.
Syntax
radial-gradient([shape size at position,] color-stop [, color-stop]+)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| shape | keyword | No | circle or ellipse (default: ellipse) |
| size | keyword | length | No | closest-side, closest-corner, farthest-side, farthest-corner (default), or explicit radius |
| position | position | No | Center point of the gradient (default: center) |
| color-stop | color [position] | Yes | A color and optional stop position |
Examples
Simple radial
Circular gradient from blue to dark blue.
css
background: radial-gradient(circle, #3b82f6, #1e3a5f);Positioned ellipse
A glow effect from the top-left corner.
css
background: radial-gradient(ellipse at top left, #fbbf24, transparent 70%);Tailwind radial
Using radial-gradient in a Tailwind arbitrary value.
html
<div class="bg-[radial-gradient(circle,_#3b82f6,_#1e3a5f)]">Glow</div>Browser Support
✓
Chrome
v26++
✓
Firefox
v16++
✓
Safari
v6.1++
✓
Edge
v12++
✓
Opera
v12.1++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
Use arbitrary values: bg-[radial-gradient(...)] or define in Tailwind v4 themeFrequently Asked Questions
How do I make a perfect circle gradient?▼
Use the circle keyword: radial-gradient(circle, ...). Without it, the default ellipse stretches to fill the element's aspect ratio.
Can I layer radial gradients?▼
Yes. Use multiple backgrounds: background: radial-gradient(...), radial-gradient(...); They stack with the first on top.
Explore CSS Color Tools
Try our free tools to work with radial-gradient() and other CSS color functions.
Open Tools