What is a gradient?
A gradient is a smooth transition between two or more colors. In web design, gradients are popular for backgrounds, buttons, and headers because they add depth and a modern look with very little code.
Linear vs. radial gradients
A linear gradient changes color along a straight line; you control its direction with the angle (0° points up, 90° points right). A radial gradient starts from a center point and spreads out in a circle. This generator creates both and gives you the matching CSS (linear-gradient or radial-gradient).
How to use it in CSS
Copy the code and paste it into your element's background property. You can add several colors and change each one by editing it. If you also need a matching color palette, try the palette generator, or check the contrast before placing text on top.