A CSS gradient is a background that fades from one colour to another, written as text instead of an image. This tool lets you build one by looking at it. Pick linear, radial or conic, put colour stops on a bar, and the CSS appears underneath, ready to copy into a stylesheet. The same gradient can be saved as a PNG at any size up to 4096 pixels on a side, which is handy for a social card, a wallpaper or a design mock-up. Nothing is uploaded: the gradient is drawn in your browser.
Linear, radial and conic
A linear gradient runs along a line. The angle is measured clockwise from the top: 0deg points up, 90deg points right, 180deg points down. The default here is 135deg, which runs from the top left corner to the bottom right. You can also use keywords such as to right. A corner keyword is not a fixed angle: in a square, to top right is 45deg, but in a box 200 pixels wide and 100 high the browser turns it into about 26.57deg so that the two corners that are not the target get exactly the middle colour.
A radial gradient spreads from a centre. The shape is a circle or an ellipse, and the size says where the last stop lands: the closest or farthest side, or the closest or farthest corner. With no size given, CSS uses an ellipse that reaches the farthest corner, so in a 200 by 100 box centred in the middle its radii are about 141.4 and 70.7 pixels.
A conic gradient sweeps around a centre like the hands of a clock. Stops are positions on the full turn, so 25% is a quarter turn. Setting the start angle rotates the whole sweep. A conic gradient with sharp stops is the usual way to draw a pie chart or a colour wheel in pure CSS.
Colour stops, hard edges and repeating
Each stop has a colour and a position, from 0% at the start to 100% at the end. Two stops at the same position make a hard edge instead of a blend, which is how stripes are made. The Stripes preset is repeating-linear-gradient(45deg, #fde68a 0%, #fde68a 10%, #f59e0b 10%, #f59e0b 20%): one yellow band and one orange band, 20% of the gradient line in total, tiled until the box is full. On a 100 by 100 pixel box the line is 141.42 pixels long, so the pattern repeats every 28.28 pixels.
If you list stops out of order, browsers move a stop that is earlier in the list than the one before it up to the same position. This tool avoids the surprise by always writing the stops sorted by position. Reverse mirrors every position, and Space evenly spreads the stops from 0% to 100%.
Opacity is part of each stop. Browsers blend colours in premultiplied form, which means a fade from red to fully transparent keeps the same red and only becomes less visible: halfway, the colour is red at 50% opacity, not a dull dark red. The PNG download follows the same rule. A colour with full opacity is written as #rrggbb. With some transparency you can choose an eight digit hex code such as #ff000080, or rgba(255, 0, 0, 0.5); both mean the same thing.
Prefixes, the PNG and good to know
Current browsers understand linear-gradient() and radial-gradient() without a vendor prefix, and have done so since about 2013, so the code from this page needs no -webkit- version. The old prefixed syntax also meant something different for directions. conic-gradient() is newer (Chrome 69, Safari 12.1 and Firefox 83) and is supported by every current browser, but not by very old ones.
Two nearly identical colours can show faint bands, because a screen has only 256 steps per channel; a larger colour difference or an extra stop in between hides it. The PNG is painted on a canvas from the same stops, so what you download matches the preview. If your browser cannot draw conic gradients on a canvas directly, the page colours each pixel itself, which takes a moment on a very large size. For shadows to go with your gradient see the box shadow generator, to check that text stays readable on it use the colour tools, and to turn a vector picture into a PNG use the SVG converter.
