How to Use the Linear, Radial & Conic Gradient Maker
-
1
Select gradient type: Linear (directional angle 0–360°), Radial (circular/elliptical with focal point), or Conic (pie/sweep rotation).
-
2
Add, drag, and delete color stops along the gradient preview line.
-
3
Rotate the interactive angle dial to adjust gradient direction in real time.
-
4
Copy the cross-browser `background: linear-gradient(...)` CSS code.
Practical Example & Use Case
Common Real-World Scenario
Building a 3-color conic gradient `conic-gradient(from 45deg, #f43f5e, #8b5cf6, #06b6d4, #f43f5e)` for a modern circular loading spinner.
Technical Notes & Limitations
Browser Engine Architecture
Generates standard W3C CSS Images Module Level 4 compliant gradient syntax.
Frequently Asked Questions
What is a conic gradient in CSS?
A conic gradient transitions color stops around a center point in a circular angle (like a color wheel or pie chart), rather than along a straight line.