CSS Gradient Generator
Generate CSS linear and radial gradients with live preview and copy CSS code
How to Use
- Use the two color pickers above to choose the start and end colors
- Select a gradient direction: linear (6 directions) or radial
- For richer gradients, click "Add Color Stop" to insert intermediate colors
- The live preview shows the gradient effect with the corresponding CSS code below
- Click "Copy CSS" to paste the code directly into your stylesheet
FAQ
What is a CSS gradient?
A CSS gradient is a smooth color transition used as a background effect. Linear gradients (linear-gradient) transition along a straight line, while radial gradients (radial-gradient) expand outward from a center point. All modern browsers support CSS gradients.
What's the difference between linear and radial gradients?
Linear gradients transition along a straight line (left to right, top to bottom, diagonal, etc.), while radial gradients expand in a circular pattern from a center point. Each has its design use cases — linear for stripes and backgrounds, radial for spotlight effects.
How do I use the generated CSS gradient in my website?
Copy the generated CSS code and paste it into your CSS file for the desired element's background property. For example: .my-element { background: linear-gradient(to right, #FF5733, #3B82F6); }. Gradients work on any element that supports the background property.