CSS Gradient Builder

Build CSS Gradients Visually — Linear, Radial, and Conic

Pick the gradient type, drag color stops, set the angle (linear) or center (radial), and watch the live preview. The generated CSS — and the Tailwind arbitrary-value form — both stay in sync so you can copy whichever your project uses.

Multi-Stop Gradients Done Right

Real gradients rarely use two evenly-spaced colors. The stop list lets you add as many stops as you need, set each one's color and percentage position, and reorder them with a click. Drag a stop's position from 0% to 100% along the bar to adjust the falloff curve.

Linear, Radial, and Conic in One Tool

Linear gradients control direction with an angle (0–360°). Radial gradients radiate from a center point — pick the shape (circle / ellipse) and where the center sits inside the box. Conic gradients sweep colors around a center, which is how you build pie-chart looks and color wheels purely in CSS.

Built-In + Custom Presets

Ship-with presets give you popular looks (sunset, ocean, midnight, mesh-style backgrounds). You can save your own gradients to a cf_gradient_presets cookie so they're back on your next visit. The cookie stays on this device — nothing is sent anywhere.

Privacy and Performance

The whole tool runs in your browser. Color math, preset storage, copy-to-clipboard — all client-side. No accounts, no tracking, no server round-trip on every slider change.