How CSS gradients are written
A CSS gradient is an image generated by the browser and used as a background, so no image file is required. A linear gradient blends colors along a straight line set by an angle. At 0deg the line points upward, at 90deg it points to the right, and at 180deg it points down. A radial gradient blends colors outward from a center point in a circle.
Each gradient lists color stops: a color and the position along the line where it applies, written as a percentage. A two-color gradient might read linear-gradient(90deg, #5B4FF0 0%, #C4F135 100%). Between the stops, the browser blends smoothly.
Gradients are cheap to ship, scale to any size without blurring and can be changed with a single line of CSS.
Where gradients are useful
Gradients show up in hero sections, buttons, cards, banners, progress bars and subtle page backgrounds. A gentle two-color blend adds depth without extra image downloads, while a stronger one can carry a brand look.
Building one by typing numbers blind is slow, because the angle and stop positions interact. A visual builder lets you drag until it looks right and then copy the exact result.
Pick colors that sit well together first. If you want a family of related shades to use as stops, the color palette generator creates one from a single base color.
How to build a gradient with this tool
- Check the live preview at the top. It starts as a left-to-right blend from #5B4FF0 to #C4F135.
- Choose Linear or Radial with the two buttons.
- For a linear gradient, drag the Angle slider anywhere from 0 to 360 degrees.
- For each color stop, click the color swatch to pick a color and drag the slider beside it to set its position from 0% to 100%.
- Click Add color stop for another stop (new ones start white at 50%). The trash icon removes a stop, but only while more than two exist.
- Click the copy button beside the code line to copy the full declaration, such as background: linear-gradient(...);.
Everything runs in your browser.
Details and limits
The output sorts stops by position, even if the sliders in the list are in a different order, so the CSS always reads from low to high.
Radial gradients are always circles, and the center and size are not adjustable. There is no repeating or conic gradient, no color transparency, and no way to type a HEX code directly. Colors come from the browser's color picker, which means opaque colors only.
Copied text is a complete background declaration. If you only need the gradient value, delete the "background:" prefix and the semicolon when you paste it. Check that text placed over a gradient stays readable using the color contrast checker, testing against the lightest and darkest parts.