About this tool
A CSS gradient is an image generated by the browser that transitions smoothly between two or more colors, declared with the linear-gradient(), radial-gradient() or conic-gradient() functions. Each color stop pairs a color with an optional position (a percentage along the gradient line or arc), and linear and conic gradients add an angle that sets the direction of the transition, while radial gradients take a shape (circle or ellipse) and a position for their origin.
Use it to design hero backgrounds, button fills, card overlays and divider accents without hand-tuning syntax: pick a type, drag the angle, add up to six stops, and copy the ready-to-paste background declaration. The preview sits on a checkerboard so you can see how semi-transparent stops composite, and the presets give you tested two and three-stop palettes to start from.
Gradients render as CSS images, so they have no intrinsic size — set a width and height (or use them as a background) or the element will collapse and you'll see nothing.
Frequently asked questions
What is the difference between linear, radial and conic gradients in CSS?
A linear gradient transitions colors along a straight line at a given angle, a radial gradient radiates outward from a center point as a circle or ellipse, and a conic gradient sweeps colors around a center point like the hands of a clock, which is why it is often used for color wheels and pie-chart effects.
How do CSS gradient angles work?
For linear-gradient() an angle of 0deg points the gradient straight up (toward the top), 90deg points right, 180deg down and 270deg left, increasing clockwise. For conic-gradient() the from <angle> value just rotates the starting position of the color sweep around the center.
Can I use more than two colors in a CSS gradient?
Yes. A gradient accepts any number of comma-separated color stops, each optionally given a position such as #f00 0%, #ff0 50%, #00f 100%. Stops are placed in the order you write them, and this generator supports up to six.