CSS Gradient Generator
Build beautiful CSS gradients visually — pick colors, set the angle or type, and see a live preview. Copy the generated CSS with one click. Supports linear and radial gradients with multiple color stops. Runs entirely in your browser.
How to Use the CSS Gradient Generator
Choose Linear or Radial gradient type. For linear gradients, drag the angle slider to set direction. Click each color swatch to pick a color, and drag the position slider to place the color stop. Click + Add color stop to add more colors. The CSS code updates live — click Copy CSS when done.
CSS Gradient Syntax
Generated CSS for a linear gradient looks like:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
For radial:
background: radial-gradient(circle, #667eea 0%, #764ba2 100%);
Tips for Great Gradients
- Use colors that are adjacent on the color wheel for harmonious blends.
- Avoid pure black to white — add a slight hue to each stop for richer results.
- A 135° angle creates a classic diagonal that looks good on most cards.
- Add a transparent stop at one end for a fade-in effect:
rgba(0,0,0,0).
Frequently Asked Questions
What is a CSS gradient?
A smooth color transition generated by the browser using the linear-gradient() or radial-gradient() CSS functions — no image file needed.
What is the difference between linear and radial gradients?
Linear transitions along a straight line at an angle. Radial transitions outward from a central point in a circular or elliptical shape.
Can I add more than two color stops?
Yes. Click "+ Add color stop" to add as many stops as you need for multi-color transitions.
How do I add a gradient to a website?
Copy the CSS and apply it as a background property: background: linear-gradient(...);