How to use it
Choose a gradient type (linear, radial or conic), pick your colors and angle, and watch the preview update live. Click Copy CSS and paste the code as the background of any element in your stylesheet.
CSS Gradient Generator
✓ 100% FREE — No Signup NeededDesign beautiful CSS gradients with live preview. Pick colors, angle and type — then copy the CSS in one click.
Part of the Image Tools collection — browse all related free tools.
FAQs
What is a CSS gradient generator?
A CSS gradient generator lets you visually design color gradients and outputs the ready-to-use CSS code, so you don't have to write gradient syntax by hand.
What types of gradients can I make?
Linear gradients (straight line), radial gradients (circular from a center point) and conic gradients (rotating around a center).
How do I use the generated CSS?
Click Copy CSS, then paste it into your stylesheet as the background property of any element.
Is this gradient generator free?
Yes. It is 100% free with no signup required.
How do I keep text readable over a gradient background?
Layer a semi-transparent dark overlay between the gradient and the text — linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)) — or choose gradient colors with similar darkness so contrast stays even. Then verify the contrast ratio hits at least 4.5:1 for body text.
What's the difference between linear, radial, and conic gradients?
Linear blends along a straight line (backgrounds, buttons), radial spreads outward from a center point (glows, vignettes, spotlights), and conic sweeps around a center like a pie chart (color wheels, pie charts, rainbow effects). Pick the geometry that matches the effect you want.
Can I animate a CSS gradient?
Not the gradient definition itself, but you can animate background-position on an oversized gradient (background-size: 200%) for a smooth color-shift effect, or crossfade between two gradients with opacity. Both techniques are GPU-cheap and run at 60fps.
How CSS gradients are built
A CSS gradient isn't an image — it's a generated background the browser paints by interpolating colors between color stops along a line, from a center point, or around a circle. Because it's code, gradients stay razor-sharp at any size, cost almost nothing to render, and never need an image file.
The core syntax: linear-gradient(angle, color1 stop1, color2 stop2, …). The angle is in degrees — 0deg runs bottom→top, 90deg left→right, 135deg diagonal. Stops are positions (0% to 100%) controlling where each color is pure; the browser blends smoothly between them. Variants: radial-gradient(circle, …) spreads from a center (glows, vignettes), and conic-gradient(…) sweeps around a point (pie charts, color wheels). Place two stops at the same position for a hard stripe edge.
Worked example: linear-gradient(135deg, #667eea 0%, #764ba2 100%) paints a diagonal blend from periwinkle to deep purple — the classic hero-section background. Add a middle stop for richness: linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%) sweeps red → amber → blue, with each transition occupying exactly half the width.
Practical tips: two or three stops look cleanest; nudge stop positions (e.g. 30%/70%) to control how fast the blend happens. Always check text contrast over gradients — add a semi-transparent dark overlay if text sits on top. Limitation: gradients band visibly on cheap printers and some low-quality displays; for print work, prefer flat colors.
Advanced gradient techniques: browsers interpolate gradients in sRGB by default, which produces muddy gray middles in some blends (blue→yellow passes through grayish-green). The fix is interpolating in a perceptual space: linear-gradient(in oklch, …) keeps blends vivid — supported in all modern browsers since ~2023. Repeating gradients (repeating-linear-gradient) tile a pattern: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) draws perfect diagonal stripes with zero images — ideal for progress bars, caution tape, and skeleton loaders. For mesh/aurora effects, layer 3–4 large radial gradients with blur and low opacity over a base color; each layer is one div or background layer, no canvas needed. And conic-gradient(from 0deg, …) with hard stops builds pie charts and color wheels in pure CSS — rotate the "from" angle to animate them.