Gradient Generator

The Gradient Generator lets you drag sliders, watch the result, and end up with a CSS gradient you can paste straight into a stylesheet. It supports linear and radial gradients with any number of colour stops (at least two), each with its own colour and position. The output is a single CSS background declaration. It cannot export an image, and it has no conic or repeating gradients and no library of presets. Radial gradients can be a circle or an ellipse, and each colour stop can have its own transparency.

How to use it

1. At the top is a 160-pixel-high preview that shows the current gradient live.
2. Choose between "Linear" and "Radial". With Radial selected, a "Shape" option appears to switch between "Circle" and "Ellipse".
3. With Linear selected, an "Angle" slider appears, from 0 to 360 degrees and set to 90 by default, meaning left to right. 0 degrees runs bottom to top and 180 degrees runs top to bottom.
4. Under "Color stops", click a colour swatch to open the picker, and drag the first slider to set where that colour sits (0% to 100%); the second, shorter slider (labelled "Alpha xx%") sets that stop's opacity, where 100% is fully opaque and anything lower is output as an rgba() colour. There are two stops to start with: #3D63DD at 0% and #2FA37A at 100%.
5. Click "Add color stop" for another stop. A new one defaults to white (#FFFFFF) at 50%. The list does not re-order while you drag; click "Sort stops", or let a position slider lose focus, and the list is re-arranged by position. To delete a stop, click the trash icon at the end of its row; at least two stops must remain.
6. Under "CSS code", click "Copy" to put the full declaration, such as background: linear-gradient(...);, on your clipboard. The button briefly says "Copied".

Example output

With nothing changed, the tool produces: background: linear-gradient(90deg, #3D63DD 0%, #2FA37A 100%); . Switch to Radial and it becomes: background: radial-gradient(circle, #3D63DD 0%, #2FA37A 100%); . Add a stop with its default white at 50% and the linear code becomes linear-gradient(90deg, #3D63DD 0%, #FFFFFF 50%, #2FA37A 100%), so blue fades to white and then to green. The code is sorted by position from lowest to highest, so the order of rows in the interface does not affect the output.

Supported features and known limits

• Only linear and radial gradients. The radial gradient can be a circle or an ellipse, radiating from the centre; you cannot set a start position or a radius.
• Colours come from the browser's colour picker, which gives #RRGGBB values; you cannot type colour names, rgb() or hsl() values. Transparency is set per stop with the "Alpha" slider (0% to 100% in whole steps), and stops below 100% are output as rgba().
• Stop positions are whole-number percentages set with a slider; you cannot enter pixel values. Dragging two stops to the same position does give a hard edge.
• The angle slider moves in whole degrees.
• The stop list in the interface keeps the order you added them and does not re-sort while you drag; click "Sort stops" or let a position slider lose focus to re-order it. The generated CSS is always sorted by position.
• The copied text is the complete background declaration, including the background: prefix and trailing semicolon. If you only need the gradient value, remove those.
• The output has no vendor-prefixed legacy syntax. Modern browsers support the standard form, but very old ones may not.
• Nothing is saved. Refreshing returns to the default blue-green gradient.

How do the angles map to directions?

In a CSS linear gradient, 0 degrees runs from bottom to top, 90 degrees from left to right, 180 degrees from top to bottom and 270 degrees from right to left. Dragging the slider while watching the preview is the quickest way to get a feel for it.

How do I make hard stripes instead of a smooth blend?

Drag two colour stops to the same percentage. The colour then switches abruptly at that point with no transition. With two stops at 50%, for example, you get a clean dividing line.

How do I use the gradient on a web page?

Paste the copied code into a CSS rule, for example in the style of an element, and that element will use the gradient as its background. To layer it over an image you can list several values in background separated by commas, but you would need to edit that by hand.

Can I make a gradient with transparency?

Yes. Every colour stop has an "Alpha" slider; set it below 100% and that colour is output as rgba(r, g, b, a), with 0% fully transparent. There is no checkerboard behind the preview, so transparent areas show the page background.

Privacy and how your data is handled

The preview and code generation happen in your browser. The colours and positions you choose are not sent to a server or stored. The Copy button just writes text to your own clipboard.