⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

CSS Conic Gradient Generator

Build CSS gradients visually: linear, radial or conic type, angle slider and up to six color stops with a live full-width preview and copyable code.

90°
Processing... 0%

Result

This page opens the gradient generator with the conic type already selected: instead of fading along a line or out from the center, the colors sweep around the center like a clock hand, starting from the angle you set on the slider.

conic-gradient() is the newest of the three CSS gradient functions and the one behind pie charts, color wheels, and eye-catching rotating-border effects. Stop positions in percent are positions around the circle — two stops at 0% and 100% blend smoothly all the way around, while stops placed close together create crisp wedges.

Adjust the start angle and stops until the preview reads right, then copy the background line. All modern browsers support conic gradients, so the code is safe to ship.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Gradient type select (linear, radial, conic) with an angle slider for linear and conic modes.
  • Color stop list: two stops to start, add or remove up to six, each with its own color picker and position in percent.
  • Copyable background CSS line plus ready-made preset pages for sunset, ocean and pastel gradients.

Key Benefits

✓ The full-width preview repaints on every change — type, angle and each color stop — so the CSS you copy is exactly what you saw.
✓ Up to six color stops with individual positions cover everything from a simple two-color fade to complex multi-band backgrounds.
✓ One declaration, three engines: switch between linear, radial and conic without rebuilding your stops.

Use Cases

  • • Compose a hero-section background by dragging the angle and color stops instead of hand-editing linear-gradient() and reloading.
  • • Compare the same color stops as linear, radial and conic gradients with one switch — the stops carry over between types.
  • • Grab a proven combination from the sunset, ocean or pastel preset page and tweak it into your brand colors.