CSS gradient generator
Build linear or radial CSS gradients with 2–10 color stops, angle controls, transparency, and presets. Preview the result and copy or download the CSS.
2–10 stops, sorted by percentage in the output. Equal positions create a hard edge and retain their listed order. Transparency is shown over a checkerboard. Color channels use 8-bit sRGB; decimal alpha is preserved in RGBA output.
Three small steps.
- Choose linear or radial and start with a preset or your own colors.
- Edit stop colors and percentages, add or remove stops, or reverse them.
- Review the preview, then copy the CSS background or download a stylesheet.
A few things to know.
Supports standard CSS color names and numeric HEX/RGB/HSL colors and stop positions from 0 to 100%. Stops are sorted by position; equal positions retain their listed order and can create hard edges. Radial gradients use a circle at the center. Browser color interpolation and output displays can differ; this is not a print-color workflow.
How your privacy works →A little more clarity.
Can a gradient fade into transparency?
Yes. Use an alpha component such as #294C3900 or rgba(41,76,57,0). The preview checkerboard shows transparent regions.
What does reversing do?
It reverses the stop list and maps each position to 100 minus its original percentage. That also reverses the color order of hard edges.