Design linear, radial, and conic gradients with live preview and copy-ready CSS.
background: -webkit- linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Generated CSS follows W3C CSS Images Module Level 3 specifications. Browser compatibility may vary. WebKit prefix is included for Safari support. Test across browsers.
A CSS gradient is not an image — it is a function the browser evaluates for every pixel it paints. A linear-gradient first draws an invisible gradient line through the element at your chosen angle, places your color stops (a color + a 0–100% position) along it, then interpolates each pixel's color between the two nearest stops. radial-gradient runs that same interpolation outward from a center point (circle or ellipse), while conic-gradient sweeps it around the center in a full rotation. Two stops are the minimum; more stops let you build banded or multi-color effects, and the browser keeps each adjacent pair of stops fully opaque and smoothly blended.
Left: a 135° linear gradient whose line runs from the top-left stop (#667eea at 0%) to the bottom-right stop (#764ba2 at 100%); each intermediate pixel is a weighted mix of the two. Right: the same stop concept wrapped radially (circle/ellipse) and conically (around the center).
Leo, a front-end dev, is handed a design mock with a diagonal purple-to-blue hero background but only a screenshot — no code. He opens this generator to recreate the exact feel and ship it as copy-ready CSS.
Create CSS gradients visually with live preview. Linear, radial, conic gradients. Copy CSS code instantly. Free, no signup, no download.
This generator builds CSS gradients visually: pick linear, radial, or conic type, drag color stops along the bar, adjust the angle and position, and watch the preview update live. The tool emits production-ready code including the standard property and the -webkit- fallback for older Safari, with syntax for repeating variants when patterns are the goal. Multi-stop gradients with midpoints, transparent-color stops, and angle-precise linear directions all configure through direct manipulation — the fastest path from imagined background to shipped CSS.
Frontend developers prototype hero backgrounds, buttons, and dividers without hand-writing gradient syntax and re-tuning numbers blind. Designers hand developers exact specs — stops, angles, hex values — instead of approximation language like make it warmer. Landing-page builders follow brand palettes into gradient systems for cards and callouts. Anyone maintaining older codebases appreciates generated -webkit- prefixed output where it is still needed. The live preview removes the edit-save-refresh loop entirely.
(1) Choose the gradient type: linear for directional blends, radial for light emanating from a point, conic for sweep effects and pie-like visuals. (2) Add color stops by clicking the bar; drag to position, click to edit color and alpha, drag midpoint handles to bias the blend. (3) For linear gradients set the angle in degrees; for radial and conic set the center position. (4) Copy the generated CSS — standard and WebKit-prefixed — straight into your stylesheet; a repeating toggle converts any configuration into its repeating counterpart.
The three types answer three visual questions. Linear gradients blend along a line and own the workhorse jobs: hero and section backgrounds, buttons, text underlines, progress fills, and dividers — subtle two-stop dark-to-darker blends at 135 or 180 degrees read as light falling across a surface. Radial gradients blend outward from a point and simulate light sources: spotlight effects, vignettes, soft glow behind icons, and the classic subtle page-background glow anchoring attention at the center. Conic gradients sweep around a circle and build rotational structure: pie charts, color wheels, loading spinners, radar-style progress rings, and angular badge effects — anything where position means direction rather than distance. Two craft rules carry most of the quality: keep stops close in lightness for backgrounds (a 5–10 percent lightness gap suffices) because big jumps band visibly, and prefer gradients over semi-transparent overlays to darken photographic heroes — an overlay flattens the image, a dark gradient preserves depth.
It supports linear-gradient (with angle control from 0° to 360°), radial-gradient (circle/ellipse with position control), and conic-gradient (with starting angle). Add unlimited color stops with precise percentage positioning. The live preview updates as you drag, and output is production-ready CSS with vendor prefixes if needed.
Yes. Copy the CSS property value, a full class definition, or a Tailwind CSS arbitrary value. It also generates the equivalent SVG markup for use in design tools. Popular presets (aurora, sunset, mesh-style multi-gradient) are included as starting points, each with 3-5 color stops pre-configured.
What do you call a crab that plays baseball?
No paywalls, no signups, no data sold. Built by a solo developer who believes useful tools should be accessible to everyone.
☕Support me on Ko-fi— keep tools free100% of proceeds go towards hosting & building more free tools.