Build a linear, radial or conic gradient with up to 5 color stops and copy the CSS. Runs on your device.
The page writes one background declaration from your choices. A linear gradient comes out as linear-gradient(135deg, #5E60CE 0%, #64DFDF 50%, #F9C74F 100%). The angle is in degrees: 0 points up, 90 points right, 180 points down, and the colors run along that line. A radial gradient is written radial-gradient(ellipse, ...) or radial-gradient(circle, ...) and spreads out from the center of the box; size and position are left at the CSS defaults, so the shape reaches the farthest corner. A conic gradient is written conic-gradient(from 45deg, ...) and sweeps around the center like a color wheel, starting at the angle you give. The page sets only what is listed here. It does not write size keywords, a custom center or repeating-linear-gradient.
You can use 2 to 5 stops. Each stop has a color and a position from 0% to 100%, and positions may have decimals, which are cut to 2 places. Colors are typed as 3 or 6 hex digits, with or without the hash, or picked with the color box next to the field; short codes such as #abc are written out as #AABBCC. Stops are written in the order of the list. If a stop sits earlier than the one above it, the browser moves it up to that earlier position, which can leave a hard edge, and the page shows a note when this happens. Two stops at the same position also make a hard edge on purpose, which is how stripes are made. The page does not sort your stops, because the order may be deliberate.
The CSS block starts with a plain line, background: #5E60CE; using your first stop, and then the gradient line. A browser that cannot read the second line keeps the first, so the box still has a color. Linear and radial gradients without vendor prefixes work in every current browser, and conic-gradient works in current Chrome, Edge, Firefox and Safari. Only very old browsers need the fallback. The block is plain CSS, so it works in a stylesheet, a style attribute or a utility-class framework that accepts arbitrary values. The second block holds the gradient value alone, for use in background-image or a custom property.
The preview box fills the width of the stage and is drawn with the same gradient value that is in the code block, so what you see is what you copy. Nothing you type is stored or sent anywhere; the page works out the CSS in your browser. A bad color shows a message under that field and hides the preview until it is fixed. The table under the result lists each stop as HEX and RGB with its position, which is handy when you need the numbers for a design file.
It is the direction the gradient runs, in degrees clockwise from straight up. 0 deg runs bottom to top, 90 deg runs left to right, 180 deg top to bottom and 270 deg right to left. The default here is 135 deg, which runs from the top-left corner toward the bottom-right.
Give two neighbouring stops the same position. For example, a red stop at 50% followed by a blue stop at 50% switches color at the halfway point with no blend. The page keeps the order you give, so you can stack several of these with up to 5 stops.
It is a fallback. A browser that does not understand the gradient line ignores it and keeps the plain color from the line above. Current browsers read both lines and the second one wins, so the fallback only matters for very old browsers.
A conic gradient sweeps around the center of the box, and the angle sets where the sweep starts, written as from 45deg. 0 deg starts at the top. A radial gradient has no angle, so that box is hidden when Radial is chosen.
No. The page writes 2 to 5 stops and does not write repeating-linear-gradient, custom centers or size keywords. Copy the value and edit it by hand if you need those.