CSS Gradient Generator

CSS has three gradient functions. linear-gradient(135deg, …) blends along a line whose angle is measured clockwise from “to top”. radial-gradient(circle at center, …) spreads from a point, and conic-gradient(from 0deg at center, …) sweeps around one, which is how pie charts and color wheels are drawn in pure CSS. Each has a repeating- variant that tiles the stop pattern.

Stops are written as color position. Two stops at the same position create a hard edge, which is how stripes are made without images. Stops accept any CSS color, including rgba() for fades to transparent. When a later stop has a smaller position than an earlier one, the browser clamps it to the earlier position.

Gradients are images, so they go in background or background-image, not background-color. The generated CSS includes a solid fallback line for very old browsers. All current browsers support these functions without vendor prefixes. Presets give quick starting points, including a conic color wheel and hard-stop stripes.