CSS Gradient Generator (layers, repeating)
Build linear, radial and conic gradients, stack several layers, drag color stops, set angle, center, transparency and repeating, and copy the CSS
Loading the tool…
Builds a background from up to four stacked linear, radial or conic gradients and gives you the background-image CSS. Translucent layers make light or mesh effects, repeating makes stripes and rings, and the picture can be saved as a PNG.
How to use
- Start from a "Presets" tile or the default. In "Layers", select the layer to edit and set "Type", "Angle" and "Repeating".
- For radial and conic layers, click or drag on the preview to move the center and choose "Shape" and "Size".
- Click the "Color stops" bar to add a stop and drag a circle to move it. Adjust the selected stop's color, "Opacity", "Position" and "Midpoint" below.
- Press "Add layer" to stack a translucent layer on top; reorder or "Hide" layers to compare.
- Press "Copy" next to CSS, or choose a "PNG size" and press "Save as PNG".
How it works
- The output is one background-image declaration; layers are painted top to bottom in CSS order. Translucent colors are written as rgb(r g b / a).
- A midpoint is the CSS transition hint that moves where two stops mix half and half. Repeating tiles the span from the first to the last stop.
- Angles and radial size keywords follow CSS Images 3, and colors mix in sRGB as browsers do by default. The PNG is drawn in the browser with the same rules.
- Your layers and stops stay in this browser.
Questions and answers
- How do I stack several gradients in CSS?
- List them in background-image separated by commas. The first one is painted on top, so upper layers need some transparency. The CSS box writes that form.
- How do I make a striped background?
- Switch on "Repeating" and put two stops of the same color at the same position for a sharp edge. The stripes preset is a quick start.
- The middle of my gradient looks muddy. What can I do?
- Switch on "Midpoint" to move the mixing point, or add a stop in the middle with the color you want. Complementary colors mixed together turn grey.
- Can the preview and the PNG differ?
- The preview is drawn by the browser from the CSS; the PNG is computed with the same rules. Apart from rounding they match.