CSS Gradient Generator
Set the type, the direction and up to twelve colour stops, and the swatch on the stage is painted with the exact declaration shown beside it: the same string goes to the preview and into the code block, so the line you copy is the gradient you were looking at. Three things separate this from the generators that hold this search. The first is that the same stops are written out as all three types at once, linear, radial and conic, each one ready to copy, so switching shape does not mean starting again. The second is that a hard edge is a first-class result: two stops sharing a position are kept, and the tool names them rather than quietly nudging one aside, which is how you get a stripe instead of a blend. The third is alpha. A stop can be rgba(), an eight digit hex or the keyword transparent, and switching between hex, rgb and hsl rewrites every stop in that notation while carrying the transparency through. Colours can be picked from the swatch or typed, positions move by slider or by number, and a stop placed behind the one before it is explained rather than silently redrawn, because CSS lifts it to the position ahead of it.
3 stops 0% 45% 100%
background: linear-gradient( 135deg, #0B7A85 0%, #5FBFC9 45%, #E08573 100% );
Colour stops
The swatch on the stage is painted with the declaration in the block beside it: the one line view is that string character for character, and the wrapped view is the same string with line breaks added.
Up to 12 stops, positions from 0% to 100%, and colours as hex, rgb(), hsl() or a basic colour name. Alpha is carried through every notation, so a stop can fade to transparent. Switching the notation rewrites the stops in it and leaves anything unreadable exactly as you typed it. The gradient is kept in this browser alone; Start over, above the tool, forgets it.
Common questions
- How do I make a CSS gradient?
- Pick the type, set the direction, then give each colour stop a colour and a position along the line. A linear gradient takes an angle in degrees, where 0 paints upwards and 90 paints to the right; a radial gradient takes a shape and a centre point; a conic gradient takes the angle it starts sweeping from. The preview repaints as you type, and the declaration under it is a single background line, shown wrapped or on one line, ready to paste into a stylesheet.
- How do I get a hard edge instead of a blend?
- Give two neighbouring stops the same position. A gradient blends between stops, so when one ends at 50% and the next begins at 50% there is no distance to blend over and the colour changes in a clean line. This tool keeps stops that share a position and names the pair underneath rather than nudging one of them aside, and the Hard stripe starter is exactly that: four stops, two of them sharing 50%, making a clean two colour split.
- Can a gradient fade to transparent?
- Yes, and alpha is carried through every notation here. Write a stop as rgba(22, 25, 27, 0), as an eight digit hex such as #16191B00, or as the keyword transparent, and it stays see-through when you switch the output between hex, rgb and hsl. The checkerboard behind the swatch is there so you can see which part of the gradient is transparent; it is a separate layer and it is not in the CSS you copy.
- What is the difference between linear, radial and conic gradients?
- A linear gradient runs the colours along a straight line at the angle you give it. A radial gradient spreads them out from a centre point as a circle or an ellipse. A conic gradient sweeps them around that point like the hand of a clock, which is what makes pie charts and colour wheels. The three cases under the tool show your current stops written as all three, so you can copy whichever one paints what you had in mind.
- Do I still need -webkit-linear-gradient and the other prefixes?
- No, and this tool never writes one. Unprefixed linear-gradient and radial-gradient have worked in every major browser for over a decade, and conic-gradient has been supported in every major browser since late 2020, so the standard syntax is what you want in new code. Prefixed forms only matter for browsers old enough that the rest of a modern stylesheet would fail them too.
- Why did a stop I placed at 20% end up somewhere else?
- Because CSS does not allow a stop to sit behind the one before it. If stop 2 is at 80% and stop 3 is at 20%, the browser lifts stop 3 to 80%, which usually looks like the stop vanished. The tool says so in a line under the stage instead of letting you discover it later, and the Sort by position button puts the stops in the order the browser will read them so the preview and your intention match again.
- What colour values can I type?
- Hex in 3, 4, 6 or 8 digits, rgb() and rgba() in the comma form or the space and slash form, hsl() and hsla() the same way, the sixteen basic CSS colour names such as teal and navy, with grey accepted alongside gray, and transparent. Anything else is refused by the stop it is on, with the reason, so a typo shows up as a message naming stop 3 rather than as a gradient that silently stops halfway.
- Is anything uploaded?
- No. The gradient is built in your browser, nothing is sent anywhere and there is no account. Your stops, direction and notation are remembered in this browser alone so they are still there when you come back, and the Start over button above the tool forgets them.
The CSS shown is exactly what the preview paints, so what you copy is what you saw. It writes the standard gradient syntax that current browsers use, with no vendor prefixes.