CSS gradient generator
Choose colors, a direction and a shape to build a CSS gradient and copy the code.
How it works
Colors are spread evenly from 0% to 100%. A linear gradient follows the angle (0° goes up, 90° to the right); a radial one spreads from the center; a conic one turns around it like a pie chart.
Frequently asked questions
Do I still need -webkit- prefixes?
No. linear-gradient() and radial-gradient() without prefixes work in every current browser.
Why does my gradient look muddy in the middle?
Mixing two very different hues in the sRGB space passes through greyish colors. Add a middle color, or use “in oklch”, which current browsers support and which keeps colors vivid.
Can I use a gradient for text?
Yes: set the gradient as background, then background-clip: text and color: transparent on the text element.