background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
bg-[linear-gradient(135deg,_#7c3aed_0%,_#06b6d4_100%)]
CSS gradients — defined in the CSS Images Level 3 and Level 4 specifications — replace image files for background effects that scale perfectly at any resolution. The three gradient types (linear-gradient, radial-gradient, conic-gradient) each accept multiple color stops with optional percentage or length positions, opacity values, and color hints that control the midpoint of each transition. Generating these by hand requires memorizing the exact syntax for angles, at-position syntax for radial gradients, and the from angle syntax for conic gradients.
The generator maintains an in-memory gradient model: type, angle or position, and an ordered array of color stops. Each stop stores a color (in HSL internally for UI controls, converted to hex or rgba for CSS output) and a position percentage. The live preview renders an actual CSS gradient on a canvas element, so what you see matches exactly what browsers will render.
Linear gradients accept an angle in degrees (0deg points upward, 90deg points right, following the CSS specification's clock-wise convention from the top). The generator lets you drag a direction dial or type a degree value. Radial gradients accept a shape (circle or ellipse) and an at position (center, top left, or custom percentage coordinates). Conic gradients accept a from angle and an at position.
Color stop positions are expressed as percentages of the gradient length. When no position is given, stops are evenly distributed. The generator adds explicit positions to every stop in the output so the CSS is portable and predictable regardless of how stops are reordered.
A frontend developer creates a brand-specific hero background gradient and exports the CSS to paste directly into a Tailwind arbitrary value class.
A UI designer tests multiple color stop combinations to find the gradient that best transitions between two brand colors without producing an unsightly muddy midpoint.
A developer replicates a gradient from a design mockup by adjusting color stops until the live preview matches the Figma frame exactly.
A web developer uses the conic gradient type to generate a CSS-only pie chart progress indicator without any SVG or JavaScript.
Choose gradient type — Linear, Radial, or Conic
Adjust the angle/position and add color stops with the color picker
Click any preset for instant beautiful gradients, or hit Random
Copy the CSS code or Tailwind arbitrary value class
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29