CSS Visual Directory
Radial Gradient
Colour spreading outward from a point rather than along a straight line.
Edit Radial Gradient
Change any value to see it update live.
About this entry
What it is
Colour spreading outward from a point rather than along a straight line.
Spotlights, orbs and backgrounds that need a clear focal point.
Copy & use
How to copy and use radial gradient
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Spotlights, orbs and backgrounds that need a clear focal point.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Radiates colour outward from a point instead of along a line, which gives the surface a clear focal point and a sense of curvature.
circle- Shape. The alternative, ellipse, stretches to the box's aspect ratio.
at 30% 30%- Centre position. Off-centre reads as a light source; dead centre reads as a target.
#ffd66b- The colour at the centre.
#f76d3c- The colour at the outer edge.
Making it yours
How to adjust radial gradient
Moving the centre is the single most effective change. Push it toward a corner and the element looks lit from that direction.
Worth knowing before you ship it
On a wide element a circle gradient runs out of colour before reaching the far edges. Use ellipse when the box is far from square.
Common questions
Using radial gradient
What is radial gradient?
Colour spreading outward from a point rather than along a straight line. Spotlights, orbs and backgrounds that need a clear focal point.
Where do I put the radial gradient CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Spotlights, orbs and backgrounds that need a clear focal point. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will radial gradient work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise radial gradient after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing