Gradient Generator

linear-gradient creates a gradient along a straight line at a specified angle (or to top, to bottom right). radial-gradient spreads out from the center of a circle or ellipse. Linear gradients work well for page and button backgrounds; radial gradients are useful for spherical effects and highlights.

conic-gradient draws a gradient around a central point, like a color wheel. It's useful for charts, color palettes, and conic effects (for example, “sun rays”). Browser support is good, except in older versions of IE.

Add multiple color stops to the gradient: linear-gradient(90deg, red 0%, yellow 25%, green 50%, blue 100%). A percentage or length sets the position of each color. If you don't specify a position, the browser distributes the stops evenly.

Yes. Add multiple gradients, separated by commas, in background-image. The first one in the list appears on top. Use background-size and background-position to place them in different areas. This is useful for complex backgrounds.

repeating-linear-gradient, repeating-radial-gradient, and repeating-conic-gradient repeat a gradient until the area is filled. Set the cycle length with color stops: repeating-linear-gradient(90deg, red 0px, blue 20px) creates stripes every 20px.