CSS gradient generator

What this tool does

CSS gradients let you fill an element with a smooth color transition without using an image. This tool lets you compose either a linear or radial gradient interactively, with up to five color stops, then copy the resulting CSS into your stylesheet.

Linear vs radial

A linear gradient transitions along a straight line. You specify the direction either as an angle (135deg) or with a keyword (to right, to bottom left). 0deg is bottom-to-top; angles increase clockwise. The default if you don't specify direction is to bottom (180deg).

A radial gradient transitions outward from a center point. You can specify the shape (circle or ellipse), size (closest-side, farthest-corner, etc.), and position. The simplest form is just circle, which centers a circular gradient.

Color stops

Each stop is a color paired with a position percentage (0–100). Stops are sorted in increasing position before being rendered. Between two stops, the browser smoothly interpolates the color in sRGB by default. Modern browsers also support linear-gradient(in oklch, …) for perceptually smoother transitions, but support is still rolling out.

Tips

• For a hard color edge, place two stops at the same position (e.g. #000 50%, #fff 50%).
• For a subtle gradient, place the same color at both endpoints with a slightly lighter or darker variant in the middle.
• Avoid extreme banding by using colors with similar luminance.
• Performance: gradients are GPU-accelerated; you can animate angle and position cheaply.

Browser support

Linear and radial gradients have been universally supported since 2012. The newer conic-gradient and gradient-color-space syntax (in 2023+ browsers) are not exposed in this tool but are part of the same family.

Privacy

The gradient is composed entirely in your browser.