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.
Usage: fill in the fields and read the answer immediately — build CSS gradients visually with live preview. Everything runs locally; nothing is uploaded.
FreeToolHub CSS Gradient Generator is a free browser-based tool — build CSS gradients visually with live preview. No signup, no upload; everything runs locally in your browser.
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.
A gradient is only as good as its stop list, and three habits separate polished blends from muddy ones. First, order stops by lightness as well as position — a dark-to-light run feels directional and intentional, while alternating lightness reads as banding. Second, two stops are usually enough: every extra stop halves your control over the blend, so add midpoints only to correct a specific flat or harsh patch. Third, keep hue travel under about 90 degrees between neighbors unless you deliberately want a rainbow sweep — purple-to-blue stays rich while purple-to-yellow passes through a grey nobody asked for. Load a preset, swap its two hex values for your brand colors, and nudge positions before adding anything. Save the result in your browser and copy the CSS — the output is plain CSS with no dependencies.
Linear and radial gradients work in every browser released this decade. Conic gradients are supported in all evergreen browsers (Chrome, Edge, Firefox, Safari) since 2020-2021 — safe for general use, with a solid fallback color recommended for legacy email clients and webviews.
Linear gradients blend along an axis — right for banners, buttons, and overlays. Conic gradients blend around a circle — right for pie charts, loader rings, and angular color sweeps. If the design reads as 'from here to there', use linear; if it reads as 'around the clock', use conic.
Gradients are painted once and cached like any background image, so static gradients are essentially free. Animating gradient positions forces repaints — if you need motion, animate a transform on an oversized gradient layer instead of the gradient itself to stay on the GPU.
Blend hues that agree with their neighbors: adjacent stops work best within about 90 degrees of hue, or at similar lightness in neighboring hues. Place stops at the visual midpoint rather than the arithmetic one to keep the blend even — the preset palettes are pre-balanced starting points.
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.
Why did the fish get bad grades?
No signups, no data sold. The core of every tool is free forever — the optional Pro plan adds batch processing, unlimited downloads, white-label exports and an ad-free experience.
☕Support me on Ko-fi— keep tools free100% of proceeds go towards hosting & building more free tools.