About This Tool
CSS Gradient Generator creates backgrounds with linear or radial CSS gradients. Each color stop has its own color and percentage position. Add or remove stops to see how the transition changes.
How to Use
- Choose a Linear or Radial gradient.
- Set 2–6 color stops with positions from 0–100%.
- For linear gradients, adjust the angle from 0–360°. The slider and number input stay in sync.
- Check the live preview and copy CSS. Use Reset or Load Example to compare color combinations.
Examples
- Red at 0% and blue at 100% create a basic two-color gradient.
- Adding a third color at 50% changes the middle of the transition.
- Color stops at the same position create a sharp color boundary.
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
background: radial-gradient(circle, #ffffff 0%, #000000 100%);How It Works & CSS Details
linear-gradient() interpolates between color stops along a specified direction; radial-gradient() transitions outward from the center. Colors are validated as opaque HEX values and positions as percentages before a valid background declaration is generated.
Common Uses
- Design website backgrounds and button colors.
- Quickly compare the direction of multicolor gradients.
- Learn how color-stop positions affect transitions.
Privacy
All input processing, calculations, CSS generation, and previews run in your browser. Your content is never uploaded. No backend, database, online API, or third-party CDN is used, and your input is not saved automatically.
FAQ
How do linear-gradient and radial-gradient differ?
A linear gradient transitions along a straight direction. A radial gradient transitions outward from the center, usually in a circle or ellipse.
Is a CSS gradient an image?
It is a CSS image generated by the browser. No image file download or online generation service is needed.
How do I change a linear gradient's direction?
Change the angle: 0deg points up, 90deg points right, and 180deg points down.
Can I use more than three colors?
Yes. This tool supports 2–6 color stops, each with its own color and position.