Quick Answer
How do you make a CSS gradient?
// Answer
Use the linear-gradient() or radial-gradient() function in the background property. For example: background: linear-gradient(135deg, #FF2230, #1a1a2e);. The angle sets the direction, and you can add as many color stops as you like.
Why use this tool
Live preview, instant CSS
Skip the guesswork — adjust colors and angle and watch the gradient update in real time. When it looks right, copy the exact CSS. Gradients add depth to backgrounds, buttons, and cards without images.
FAQ
Frequently asked questions
Linear gradients transition along a straight line at an angle; radial gradients radiate outward from a center point.
Adjust the angle in degrees. 0deg points up, 90deg points right, 135deg points to the bottom-right.
This tool uses two stops for simplicity, but CSS supports many — just add more colors to the function.
Yes, free and running in your browser.
More tools