Dev Tools
Client-sidefiles never upload

CSS gradient editor (linear / radial / conic)

Three gradient kinds with live editing β€” slide the angle / centre / from-angle, add or remove stops, change colours, watch the preview update. Output as CSS, Tailwind v4 arbitrary class, or SVG gradient definition.

Gradient type
Preview
Stops (drag, recolour, add or remove)
  • %
  • %
Presets
Output format
css
background-image: linear-gradient(135deg, #ff0080 0%, #7928ca 100%);
β€ΊHow to use
  1. Pick a gradient type at the top: Linear, Radial, or Conic (e.g. the rainbow wheel).
  2. The settings panel on the right exposes the geometry knobs for the chosen type (angle / centre / shape / from-angle).
  3. Below, the Stops editor lets you slide stop positions, click the swatch to change colour, βœ• to drop a stop, or + Add stop. Every gradient needs at least two.
  4. Presets apply curated combos (Sunset, Vaporwave, Aurora, Spotlight, Rainbow wheel).
  5. Output tab strip switches between four formats: CSS block / CSS value / Tailwind v4 bracket class / SVG definition.
Tips
  • Linear gradient angle 0Β° points up, 90Β° right β€” clockwise like a clock face (NOT the mathematical 0Β°=right convention).
  • Conic gradient is not natively supported in SVG β€” the tool emits a comment suggesting or a CSS background.
  • Multi-stop gradients can stand in for mesh gradients; 5-7 stops give a really smooth look.
  • Tailwind v4 bg-[...] arbitrary classes support every CSS gradient function β€” no need for a custom utility.

Related tools