CSS gradient generator tool
Start from
Pick colors by hand, or pull them out of a photo. Either way feeds the same gradient engine below.
Or edit each stop directly in the Color Stops panel below.
Gradient type
Angle 135°
Animate background
Color stops 2 of 8
Presets tap to apply
Preview
Export
background: linear-gradient(135deg, #2F3E9E 0%, #7C3AED 100%);
Two honest ways to start a gradient
Most gradient tools only do the first one. Both feed the same engine below.
From a color
Pick exact hex values with the color picker, or start from one of the built-in presets when you already know the mood you want.
From a photo
Upload a moodboard image or a product photo and pull its real, dominant colors straight into the gradient's stop list.
Linear, radial, and conic, and when to reach for each
Every CSS gradient function shapes color differently. Tap one to see the code.
Colors transition along a straight line at a set angle. 0deg flows bottom to top, 90deg flows left to right, and 135deg flows diagonally, which is why most hero sections lean on an angle between 120 and 150 degrees for a direction that reads as deliberate rather than accidental.
Works well for: Hero backgrounds, banners, button fills, section dividers
background: linear-gradient(135deg, #2F3E9E 0%, #7C3AED 100%);Colors radiate outward from a center point in a circular or elliptical pattern. Because the light appears to come from one spot, radial gradients read as glowing or illuminated in a way a straight-line transition cannot, which is why they show up so often behind icons and call-to-action buttons.
Works well for: Spotlight effects, glowing buttons, icon backgrounds, product highlights
background: radial-gradient(circle, #F59E0B 0%, #EF4444 100%);Colors rotate around a center point instead of flowing along a line or expanding outward, the same way a clock face or a color wheel is built. It is the least used of the three gradient types online, which is exactly why it stands out when a chart, a progress ring, or a decorative background calls for it.
Works well for: Pie and donut charts, color wheels, circular progress rings, starburst backgrounds
background: conic-gradient(from 0deg, #22C55E 0%, #3B82F6 50%, #22C55E 100%);Why transparency and animation get their own controls
A gradient that only ever uses solid colors can't fade into whatever sits behind it, and a gradient that never moves can feel static on a hero section built to feel alive. Both are one toggle away here, not a manual rewrite of the generated CSS.
Transparent stops
Each stop's alpha slider goes from fully opaque to fully transparent independent of its hue, the correct way to fade a gradient into an image or a card edge, rather than fading it to white.
Animated background
Animation mode enlarges the gradient and moves its position on a loop. The export panel gives you the exact @keyframes block so the motion survives the copy-paste.
Building a gradient background that looks intentional
A repeatable process, not a list of presets to copy blindly.
Pick a gradient type on purpose
Linear for a background or a banner, radial for a spotlight or a glow, conic for anything circular like a chart or a progress ring. The type should match what the gradient is supposed to represent, not just what looks good in the preview.
Start from a real color
Set a base hex value by hand if you already have a brand color, or upload a photo and let the tool pull real, distinct colors out of it, useful when a moodboard image captures the mood better than a color picker does.
Add stops and set positions
Two stops is the minimum, but 3 or 4 stops with uneven positions almost always look more considered than two colors split evenly down the middle. Push a stop's position toward one edge to make it read as an accent rather than an equal partner.
Decide what needs to be transparent
An overlay gradient sitting on top of a photo, or a fade at the edge of a card, needs at least one stop with reduced alpha, not just a lighter color. A transparent stop lets whatever sits underneath show through; a light stop just hides it with white.
Export in the format your project actually uses
Plain CSS for a stylesheet, Tailwind for a component using utility classes, CSS custom properties for a design-token setup, or the animated keyframes block if the gradient needs to move. Copying the wrong format is the most common reason a pasted gradient needs a second round of manual edits.
Who this actually saves time for
Frontend developers
Skip memorizing gradient syntax for three different CSS functions. Copy plain CSS, a Tailwind className string with arbitrary values, or a CSS variable declaration, whichever matches how the project is already structured.
UI and product designers
Try a gradient across linear, radial, and conic without leaving the browser, then hand a developer exact, working CSS instead of a screenshot and a hex code guessed from a color picker.
Marketers and no-code builders
Paste a finished CSS background declaration straight into a custom-code field in Webflow, Framer, or any site builder that accepts raw CSS, no gradient syntax knowledge required.
Tailwind CSS users
Get the exact arbitrary-value className string for radial and conic gradients, which Tailwind has no built-in utility for, instead of hand-translating CSS into square-bracket syntax.
Questions people ask before building a gradient
Direct answers on photo extraction, transparency, animation, Tailwind, and how this compares to other tools.
Yes. No account, no signup, and no usage limit on either starting mode, any of the three gradient types, or any export format.
Yes — the Photo tab reads the image directly in your browser and extracts its dominant colors using pixel sampling, not a placeholder or a guess, then loads them straight into the gradient's color stops so you can build a palette-accurate gradient from a moodboard or product photo.
Yes. Every color stop has its own alpha slider, independent of its hue, so you can fade a stop toward fully transparent for image overlays, fade-outs at the edge of a card, or a frosted-glass style panel.
Yes. Turning on animation enlarges the gradient and moves its background-position over time for a smooth, looping motion, and the export panel gives you the matching @keyframes block, ready to paste into a stylesheet alongside the base gradient.
Yes. The Tailwind export outputs a complete className string. For simple two or three stop linear gradients it uses Tailwind's built-in from, via, and to utilities; for radial and conic gradients, or anything with four or more stops, it uses Tailwind's arbitrary-value syntax in square brackets since there's no built-in utility for those cases.
W3Schools' tool is a solid two-color teaching demo built to sit inside its CSS documentation. This tool is built for shipping real interfaces: up to 8 stops with individual transparency, a photo-based starting mode, animation, and text-gradient and border-gradient exports on top of plain CSS and Tailwind.
Yes. The Text Gradient export panel gives you the background-clip and transparent-text-fill combination needed to apply the current gradient directly to a heading or a piece of text, copy-paste ready.
Yes. The Border Gradient export panel outputs the double-background technique CSS uses for gradient borders, since border-color alone cannot take a gradient value directly.
Two stops covers most buttons and simple backgrounds. Three or four stops, placed at uneven positions rather than split evenly, is usually what separates a gradient that looks intentional from one that looks like a default template.
Build your first gradient
A color or a photo. No signup, either way.