Radial & Conic Gradients
Beyond straight lines, CSS can paint circles (radial-gradient) and pie slices (conic-gradient). Learn the syntax and a common typo that breaks them.
Step 1 of 4
radial-gradient: colours fanning out from a centre
A radial gradient starts from a centre point and fans outward. It is perfect for spotlight effects, glowing buttons, and attention-grabbing badges.
Anatomy: radial-gradient(shape, color1, color2, ...). Common shapes: circle or ellipse. You can also place the centre with at: radial-gradient(circle at top right, ...).
Think of it this way: Imagine a torch shining at a wall in a dark room. The brightest spot is in the middle and the light fades into darkness around it. That fade is what a radial gradient draws.
Learn more on MDN
HTMLREAD ONLY
PREVIEW