CSS Background Maker

A CSS background is more than a single color. This tool builds five kinds: solid, linear gradient, radial gradient, conic gradient, and a repeating pattern, and shows exactly how each one is written.

Switch modes at the top to change what the controls below do. Linear gradients blend colors along a straight line, so you set the angle and each color stop. Radial gradients blend outward from a center point, so you choose a circle or ellipse shape and a position instead. Conic gradients sweep colors around a center point like a color wheel, the technique behind pure-CSS pie charts. Add or remove color stops to control how many colors blend and where each sits in the transition, up to four per gradient.

Pattern mode works differently: instead of a smooth blend, it repeats a small shape, stripes, dots, a grid, or a checkerboard, across the background using repeating gradients and background-size, giving you texture instead of a fade. Adjust the two colors and the spacing slider to set how tight or spread out the pattern looks.

The preview updates as you move any control, and the light and dark text toggle shows whether your background is a safe place for readable copy, since one end of a gradient is often much lighter than the other. When it looks right, copy the CSS declaration below the preview and paste it onto any element's background property. Everything runs in your browser; nothing you design here is saved or sent anywhere.