Conic Gradient Generator
CSS conic gradients are still underused, partly because they're hard to author by hand. This builder gives you a live preview of the gradient applied to ellipse, square, rectangle, or pie shapes, with sliders for the `from` angle and `at` center position. Add or remove color stops, drag positions, and pick colors with the system color picker. Five presets — rainbow, sunset, monochrome, checkerboard, and a 3-segment ring chart — get you started. Output is plain CSS you can drop into any stylesheet; works in all modern browsers (Chromium 69+, Firefox 83+, Safari 12.1+).
background: conic-gradient(#ef4444 0%, #f59e0b 25%, #10b981 50%, #3b82f6 75%, #a855f7 100%);
Works in all modern browsers (Chromium 69+, Firefox 83+, Safari 12.1+). All values are degrees and percent.
How to use
- Pick a preset or start from the default rainbow. The preview updates as you tweak.
- Slide the `from` angle to rotate the whole gradient. Move the center sliders to off-center the conic apex.
- Add stops where you want hard transitions (two stops at the same position make a sharp edge — useful for pie charts).
Frequently asked questions
- How is conic different from linear/radial?
- Linear interpolates along a straight line; radial along a circle outward from a point; conic interpolates around a circle (like a clock face). Conic is what you reach for when the gradient should sweep around an axis — pie/donut charts, color wheels, checkered patterns, loading spinners.
- Why two stops at the same position?
- It creates a hard edge instead of a smooth transition. `red 0% 25%, blue 25% 50%` means 'red from 0 to 25%, then immediately blue from 25 to 50%' — perfect for pie chart segments or sharp checkerboard patterns. Without overlap, you'd get a smooth blend.
Related tools
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.
Color Mixer
Interpolate between two colors in RGB, HSL, or CIELAB space. See a gradient strip of intermediate steps.
Color Lerp / Gradient Steps
Pick two hex colors, get N discrete intermediate steps — in sRGB, linear RGB, OKLab or HSL — with optional easing.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Named Colors
All 147 CSS / X11 named colors with HEX, RGB, and a live swatch — searchable and grouped by hue.