Why is there a line at the top of my conic gradient?

The gradient wraps at 360° and your first and last stops differ. Emit a final stop at 360deg equal to the first, or for a full hue sweep interpolate one colour to itself with `in oklch longer hue`.

What is the difference between linear, radial and conic gradients?

Linear moves along a line, radial outward from a centre, and conic around a centre — stops are angles instead of positions, which is what makes colour wheels and pie segments possible.

Technique

Conic gradients

Make conic gradients that close cleanly at 360°: hue wheels in OKLCH, ring charts, hard-stop pie segments and swatch dials. Live generator with the seam rule explained, plus CSS and SVG to copy.

fromdegat%Open in the full maker →

Aa — the quick brown fox

black text · worst 4.47:1 · AA large only

banding low · 2.38px

6 stops · click the track to add · drag to move · select to edit

Export

CSS with the interpolation space, Tailwind v4, SVG with correct geometry, a DTCG token, and the PNG.

Apply this to a brand → sign in

.gradient {
  background-image: conic-gradient(from 0deg at 50% 50%, #635bff 0deg, #5b66ff 5.15deg, #5371ff 10.3deg, #497bff 15.44deg, #3e85ff 20.56deg, #318eff 25.7deg, #2097ff 30.85deg, #00a0ff 36deg, #00a8ff 41.15deg, #00b0ff 46.3deg, #00b8ff 51.44deg, #00c0ff 56.56deg, #00c7ff 61.7deg, #00cdff 66.85deg, #00d4ff 72deg, #00d7fb 77.15deg, #00daf6 82.3deg, #00dcf0 87.44deg, #00dee8 92.56deg, #00e0e0 97.7deg, #00e2d8 102.85deg, #00e3d0 108deg, #00e5c7 113.15deg, #00e7bd 118.3deg, #00e9b1 123.44deg, #00eaa5 128.56deg, #00ea98 133.7deg, #1dea8a 138.85deg, #43e97b 144deg, #5de872 149.15deg, #71e768 154.3deg, #82e65f 159.44deg, #91e556 164.56deg, #9fe44d 169.7deg, #ace244 174.85deg, #b8e13c 180deg, #c3df33 185.15deg, #cddd2c 190.3deg, #d7db25 195.44deg, #e0da20 200.56deg, #e9d81e 205.7deg, #f1d61f 210.85deg, #f9d423 216deg, #fdcb03 221.15deg, #ffc200 226.3deg, #ffb900 231.44deg, #ffb000 236.56deg, #ffa700 241.7deg, #ff9e00 246.85deg, #ff9600 252deg, #ff8d14 257.15deg, #ff8423 262.3deg, #ff7a2d 267.44deg, #ff7138 272.56deg, #ff6844 277.7deg, #ff604e 282.85deg, #ff5858 288deg, #fc526a 293.15deg, #f84d7a 298.3deg, #f24a8a 303.44deg, #ec489a 308.56deg, #e347a9 313.7deg, #da47b7 318.85deg, #d048c5 324deg, #c44ad1 329.15deg, #b74cdd 334.3deg, #a94ee7 339.44deg, #9a51f0 344.56deg, #8a54f7 349.7deg, #7857fc 354.85deg, #635bff 360deg);
  background-image: conic-gradient(from 0deg at 50% 50% in oklch shorter hue, #635bff 0deg, #00d4ff 72deg, #43e97b 144deg, #f9d423 216deg, #ff5858 288deg, #635bff 360deg);
}

How it works

conic-gradient([from <angle>]? [at <position>]? [in <space>]?, <angular-color-stop-list>). Stops take angles, not positions, and the gradient sweeps clockwise from 12 o'clock. Uses: colour wheels, ring charts, swatch-dial marks, and hard-stop pie segments for palette visualisation.

The seam

A conic wraps at 360° → 0°. If the first and last stop colours differ you get a hard radial line at the top. Three rules, all built into the generator: always emit an explicit final stop equal to the first at 360° (the engine closes every conic); for a full hue sweep use in oklch longer hue from a colour to itself, which the spec resolves as the full 360° arc; and if the palette genuinely has an odd number of hues, rotate from so the seam sits under a UI element.

css · hue wheel (oklch longer hue, one colour to itself)

conic-gradient(from 0deg at 50% 50% in oklch longer hue, #635bff 0deg, #635bff 360deg)

css · hard-stop pie segments

conic-gradient(from 0deg, #635bff 0deg 120deg, #00d4ff 120deg 220deg, #43e97b 220deg 360deg)

Repeating an angle (#635bff 0deg 120deg) produces a hard edge — that is how ring charts and palette dials are drawn. The generator above interpolates in OKLCH by default so the arcs between your colours stay vivid; switch the space in the full maker if you want the sRGB look.

Starting point, as code

css

.gradient {
  background-image: conic-gradient(from 0deg at 50% 50%, #635bff 0deg, #5b66ff 5.15deg, #5371ff 10.3deg, #497bff 15.44deg, #3e85ff 20.56deg, #318eff 25.7deg, #2097ff 30.85deg, #00a0ff 36deg, #00a8ff 41.15deg, #00b0ff 46.3deg, #00b8ff 51.44deg, #00c0ff 56.56deg, #00c7ff 61.7deg, #00cdff 66.85deg, #00d4ff 72deg, #00d7fb 77.15deg, #00daf6 82.3deg, #00dcf0 87.44deg, #00dee8 92.56deg, #00e0e0 97.7deg, #00e2d8 102.85deg, #00e3d0 108deg, #00e5c7 113.15deg, #00e7bd 118.3deg, #00e9b1 123.44deg, #00eaa5 128.56deg, #00ea98 133.7deg, #1dea8a 138.85deg, #43e97b 144deg, #5de872 149.15deg, #71e768 154.3deg, #82e65f 159.44deg, #91e556 164.56deg, #9fe44d 169.7deg, #ace244 174.85deg, #b8e13c 180deg, #c3df33 185.15deg, #cddd2c 190.3deg, #d7db25 195.44deg, #e0da20 200.56deg, #e9d81e 205.7deg, #f1d61f 210.85deg, #f9d423 216deg, #fdcb03 221.15deg, #ffc200 226.3deg, #ffb900 231.44deg, #ffb000 236.56deg, #ffa700 241.7deg, #ff9e00 246.85deg, #ff9600 252deg, #ff8d14 257.15deg, #ff8423 262.3deg, #ff7a2d 267.44deg, #ff7138 272.56deg, #ff6844 277.7deg, #ff604e 282.85deg, #ff5858 288deg, #fc526a 293.15deg, #f84d7a 298.3deg, #f24a8a 303.44deg, #ec489a 308.56deg, #e347a9 313.7deg, #da47b7 318.85deg, #d048c5 324deg, #c44ad1 329.15deg, #b74cdd 334.3deg, #a94ee7 339.44deg, #9a51f0 344.56deg, #8a54f7 349.7deg, #7857fc 354.85deg, #635bff 360deg);
  background-image: conic-gradient(from 0deg at 50% 50% in oklch shorter hue, #635bff 0deg, #00d4ff 72deg, #43e97b 144deg, #f9d423 216deg, #ff5858 288deg, #635bff 360deg);
}

tailwind v4

bg-[conic-gradient(from_0deg_at_50%_50%_in_oklch_shorter_hue,#635bff_0deg,#00d4ff_72deg,#43e97b_144deg,#f9d423_216deg,#ff5858_288deg,#635bff_360deg)]

svg

<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="600" viewBox="0 0 1440 600"><!-- conic-gradient has no SVG paint server (SVG 2 defines linearGradient + radialGradient only); this is a 72-wedge sampled approximation in the spec's interpolation space. --><clipPath id="bs-gradient-clip"><rect width="1440" height="600"/></clipPath><g clip-path="url(#bs-gradient-clip)"><path d="M720 300 L720 -487.8 A787.8 787.8 0 0 1 789.4461 -484.7331 Z" fill="#5f60ff"/><path d="M720 300 L788.6613 -484.8022 A787.8 787.8 0 0 1 857.5758 -475.6944 Z" fill="#576bff"/><path d="M720 300 L856.8 -475.8315 A787.8 787.8 0 0 1 924.6585 -460.7521 Z" fill="#4f75ff"/><path d="M720 300 L923.8976 -460.9564 A787.8 787.8 0 0 1 990.1836 -440.02 Z" fill="#457fff"/><path d="M720 300 L989.4435 -440.2898 A787.8 787.8 0 0 1 1053.6525 -413.656 Z" fill="#3988ff"/><path d="M720 300 L1052.9387 -413.9893 A787.8 787.8 0 0 1 1114.5821 -381.8606 Z" fill="#2b91ff"/><path d="M720 300 L1113.9 -382.2548 A787.8 787.8 0 0 1 1172.5086 -344.8758 Z" fill="#189aff"/><path d="M720 300 L1171.8635 -345.328 A787.8 787.8 0 0 1 1226.9913 -302.9831 Z" fill="#00a2ff"/><path d="M720 300 L1226.3881 -303.4898 A787.8 787.8 0 0 1 1277.6155 -256.5014 Z" fill="#00aaff"/><path d="M720 300 L1277.0587 -257.0587 A787.8 787.8 0 0 1 1323.9959 -205.7843 Z" fill="#00b2ff"/><path d="M720 300 L1323.4898 -206.3881 A787.8 787.8 0 0 1 1365.7795 -151.218 Z" fill="#00baff"/><path d="M720 300 L1365.328 -151.8635 A787.8 787.8 0 0 1 1402.6484 -93.2175 Z" fill="#00c1ff"/><path d="M720 300 L1402.2548 -93.9 A787.8 787.8 0 0 1 1434.3219 -32.2245 Z" fill="#00c8ff"/><path d="M720 300 L1433.9893 -32.9387 A787.8 787.8 0 0 1 1460.5589 31.297 Z" fill="#00ceff"/><path d="M720 300 L1460.2898 30.5565 A787.8 787.8 0 0 1 1481.1599 96.8634 Z" fill="#00d4ff"/><path d="M720 300 L1480.9564 96.1024 A787.8 787.8 0 0 1 1495.968 163.9759 Z" fill="#00d7fb"/><path d="M720 300 L1495.8315 163.2 A787.8 787.8 0 0 1 1504.8705 232.1235 Z" fill="#00daf6"/><path d="M720 300 L1504.8022 231.3387 A787.8 787.8 0 0 1 1507.7996 300.7878 Z" fill="#00dcf0"/><path d="M720 300 L1507.8 300 A787.8 787.8 0 0 1 1504.7331 369.4461 Z" fill="#00dee8"/><path d="M720 300 L1504.8022 368.6613 A787.8 787.8 0 0 1 1495.6944 437.5758 Z" fill="#00e0e1"/><path d="M720 300 L1495.8315 436.8 A787.8 787.8 0 0 1 1480.7521 504.6585 Z" fill="#00e2d9"/><path d="M720 300 L1480.9564 503.8976 A787.8 787.8 0 0 1 1460.02 570.1836 Z" fill="#00e3d1"/><path d="M720 300 L1460.2898 569.4435 A787.8 787.8 0 0 1 1433.656 633.6525 Z" fill="#00e5c8"/><path d="M720 300 L1433.9893 632.9387 A787.8 787.8 0 0 1 1401.8606 694.5821 Z" fill="#00e7be"/><path d="M720 300 L1402.2548 693.9 A787.8 787.8 0 0 1 1364.8758 752.5086 Z" fill="#00e8b4"/><path d="M720 300 L1365.328 751.8635 A787.8 787.8 0 0 1 1322.9831 806.9913 Z" fill="#00eaa8"/><path d="M720 300 L1323.4898 806.3881 A787.8 787.8 0 0 1 1276.5014 857.6155 Z" fill="#00ea9b"/><path d="M720 300 L1277.0587 857.0587 A787.8 787.8 0 0 1 1225.7843 903.9959 Z" fill="#06ea8e"/><path d="M720 300 L1226.3881 903.4898 A787.8 787.8 0 0 1 1171.218 945.7795 Z" fill="#3ae980"/><path d="M720 300 L1171.8635 945.328 A787.8 787.8 0 0 1 1113.2175 982.6484 Z" fill="#55e975"/><path d="M720 300 L1113.9 982.2548 A787.8 787.8 0 0 1 1052.2245 1014.3219 Z" fill="#6ae86c"/><path d="M720 300 L1052.9387 1013.9893 A787.8 787.8 0 0 1 988.703 1040.5589 Z" fill="#7ce763"/><path d="M720 300 L989.4435 1040.2898 A787.8 787.8 0 0 1 923.1366 1061.1599 Z" fill="#8be65a"/><path d="M720 300 L923.8976 1060.9564 A787.8 787.8 0 0 1 856.0241 1075.968 Z" fill="#99e451"/><path d="M720 300 L856.8 1075.8315 A787.8 787.8 0 0 1 787.8765 1084.8705 Z" fill="#a6e348"/><path d="M720 300 L788.6613 1084.8022 A787.8 787.8 0 0 1 719.2122 1087.7996 Z" fill="#b2e240"/><path d="M720 300 L720 1087.8 A787.8 787.8 0 0 1 650.5539 1084.7331 Z" fill="#bde038"/><path d="M720 300 L651.3387 1084.8022 A787.8 787.8 0 0 1 582.4242 1075.6944 Z" fill="#c8de30"/><path d="M720 300 L583.2 1075.8315 A787.8 787.8 0 0 1 515.3415 1060.7521 Z" fill="#d1dd29"/><path d="M720 300 L516.1024 1060.9564 A787.8 787.8 0 0 1 449.8164 1040.02 Z" fill="#dbdb23"/><path d="M720 300 L450.5565 1040.2898 A787.8 787.8 0 0 1 386.3475 1013.656 Z" fill="#e4d91f"/><path d="M720 300 L387.0613 1013.9893 A787.8 787.8 0 0 1 325.4179 981.8606 Z" fill="#ecd71e"/><path d="M720 300 L326.1 982.2548 A787.8 787.8 0 0 1 267.4914 944.8758 Z" fill="#f4d520"/><path d="M720 300 L268.1365 945.328 A787.8 787.8 0 0 1 213.0087 902.9831 Z" fill="#fad11c"/><path d="M720 300 L213.6119 903.4898 A787.8 787.8 0 0 1 162.3845 856.5014 Z" fill="#ffc900"/><path d="M720 300 L162.9413 857.0587 A787.8 787.8 0 0 1 116.0041 805.7843 Z" fill="#ffc000"/><path d="M720 300 L116.5102 806.3881 A787.8 787.8 0 0 1 74.2205 751.218 Z" fill="#ffb700"/><path d="M720 300 L74.672 751.8635 A787.8 787.8 0 0 1 37.3516 693.2175 Z" fill="#ffaf00"/><path d="M720 300 L37.7452 693.9 A787.8 787.8 0 0 1 5.6781 632.2245 Z" fill="#ffa600"/><path d="M720 300 L6.0107 632.9387 A787.8 787.8 0 0 1 -20.5589 568.703 Z" fill="#ff9d00"/><path d="M720 300 L-20.2898 569.4435 A787.8 787.8 0 0 1 -41.1599 503.1366 Z" fill="#ff9500"/><path d="M720 300 L-40.9564 503.8976 A787.8 787.8 0 0 1 -55.968 436.0241 Z" fill="#ff8c16"/><path d="M720 300 L-55.8315 436.8 A787.8 787.8 0 0 1 -64.8705 367.8765 Z" fill="#ff8323"/><path d="M720 300 L-64.8022 368.6613 A787.8 787.8 0 0 1 -67.7996 299.2122 Z" fill="#ff7a2d"/><path d="M720 300 L-67.8 300 A787.8 787.8 0 0 1 -64.7331 230.5539 Z" fill="#ff7138"/><path d="M720 300 L-64.8022 231.3387 A787.8 787.8 0 0 1 -55.6944 162.4242 Z" fill="#ff6943"/><path d="M720 300 L-55.8315 163.2 A787.8 787.8 0 0 1 -40.7521 95.3415 Z" fill="#ff614e"/><path d="M720 300 L-40.9564 96.1024 A787.8 787.8 0 0 1 -20.02 29.8164 Z" fill="#ff5957"/><path d="M720 300 L-20.2898 30.5565 A787.8 787.8 0 0 1 6.344 -33.6525 Z" fill="#fd5367"/><path d="M720 300 L6.0107 -32.9387 A787.8 787.8 0 0 1 38.1394 -94.5821 Z" fill="#f94e78"/><path d="M720 300 L37.7452 -93.9 A787.8 787.8 0 0 1 75.1242 -152.5086 Z" fill="#f44a87"/><path d="M720 300 L74.672 -151.8635 A787.8 787.8 0 0 1 117.0169 -206.9913 Z" fill="#ed4896"/><path d="M720 300 L116.5102 -206.3881 A787.8 787.8 0 0 1 163.4986 -257.6155 Z" fill="#e547a5"/><path d="M720 300 L162.9413 -257.0587 A787.8 787.8 0 0 1 214.2157 -303.9959 Z" fill="#dd47b3"/><path d="M720 300 L213.6119 -303.4898 A787.8 787.8 0 0 1 268.782 -345.7795 Z" fill="#d348c1"/><path d="M720 300 L268.1365 -345.328 A787.8 787.8 0 0 1 326.7825 -382.6484 Z" fill="#c849cd"/><path d="M720 300 L326.1 -382.2548 A787.8 787.8 0 0 1 387.7755 -414.3219 Z" fill="#bc4bd9"/><path d="M720 300 L387.0613 -413.9893 A787.8 787.8 0 0 1 451.297 -440.5589 Z" fill="#af4de3"/><path d="M720 300 L450.5565 -440.2898 A787.8 787.8 0 0 1 516.8634 -461.1599 Z" fill="#a14fec"/><path d="M720 300 L516.1024 -460.9564 A787.8 787.8 0 0 1 583.9759 -475.968 Z" fill="#9152f4"/><path d="M720 300 L583.2 -475.8315 A787.8 787.8 0 0 1 652.1235 -484.8705 Z" fill="#8055fa"/><path d="M720 300 L651.3387 -484.8022 A787.8 787.8 0 0 1 720.7878 -487.7996 Z" fill="#6e59fe"/></g></svg>

Questions

Why is there a line at the top of my conic gradient?: The gradient wraps at 360° and your first and last stops differ. Emit a final stop at 360deg equal to the first, or for a full hue sweep interpolate one colour to itself with `in oklch longer hue`.
What is the difference between linear, radial and conic gradients?: Linear moves along a line, radial outward from a centre, and conic around a centre — stops are angles instead of positions, which is what makes colour wheels and pie segments possible.

The full maker Mesh gradients →Grainy gradients →Tailwind gradients →

mcpConnect your agent to the gradient engine

live endpoint

Point any MCP client at the shared gradients endpoint and your agent gets the same engine as this page — make_gradient returns CSS with the interpolation space, Tailwind v4, SVG, a PNG URL, a DTCG token and the contrast report in one call; brand_gradients derives the whole contact sheet from a brand or a palette. Read-only, no key. Every gradient is a /gradients/new/… link: open it, refine, paste it back.

endpointhttps://mcp.brandsweets.com/gradients/mcp

claude mcp add --transport http brandsweets-gradients https://mcp.brandsweets.com/gradients/mcp

try this prompt

›make a closed conic gradient from my five brand colours in oklch with the seam at 45deg

Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.

Export

How it works

The seam

Starting point, as code

Questions

More