CSS Gradient Generator Guide: Linear, Radial, and Conic
Gradients went from a 2010s taboo back to everywhere — hero backgrounds, buttons, text fills, mesh-style glows. CSS ships three gradient functions, and once you understand their anatomy, a css gradient generator becomes a speed tool instead of a crutch.
linear-gradient: the workhorse
background: linear-gradient(120deg, #055aae, #ea2558, #fe7825) paints color along a straight line. The angle works like a compass: 0deg points up, 90deg points right, 180deg down. Everything after the angle is a color stop; by default they're spaced evenly, but you can pin them — #ea2558 40% forces the crimson to sit at 40% of the line. Two stops at the same position create a hard edge, which is how gradient stripes are made.
radial-gradient: glows and spotlights
radial-gradient(circle, #fe7825, transparent 70%) radiates color from a center point outward. It's the tool behind soft glow effects: park a huge, mostly-transparent radial gradient behind a hero section and you get atmosphere for one line of CSS. You can control the shape (circle or ellipse), the size, and the center position.
conic-gradient: sweeps and charts
conic-gradient sweeps color around a center point like a clock hand — it's how pure-CSS pie charts, color wheels, and those rotating border effects are built. Combine it with a mask and an animated angle and you get the spinning-hairline card borders you see on modern SaaS sites.
Skip the syntax entirely
Our CSS Gradient tool handles the two-color-plus-optional-third case with an angle dial and instant copy-paste CSS. When you want a middle color you can position precisely — or a conic sweep — the 3-Color Gradient tool adds a movable middle stop and all three gradient types.