Online Tool Store
Gradient Palette Maker
Generate a CSS gradient and an evenly spaced color palette between two colors, with adjustable angle and step count. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
How the gradient palette maker works
- Pick a start and end color, plus a gradient angle.
- Choose how many palette steps to generate between them.
- Copy the CSS gradient and individual swatch hex codes.
FAQ
How is the color palette generated?
By linearly interpolating the RGB values between your start and end colors across the number of steps you choose, producing an evenly spaced set of swatches.
Can I use the output directly in CSS?
Yes - the gradient line (background: linear-gradient(...)) is ready to paste into a stylesheet, and each swatch hex code can be used individually as solid colors.
What is the angle setting for?
It controls the direction of the CSS linear-gradient, in degrees - 0deg points upward, 90deg points right, and 180deg points downward, matching standard CSS gradient angle conventions.
How many palette steps can I generate?
Choose 5, 7, or 9 evenly spaced steps between your start and end colors.
How we compare
| Feature | Online Tool Store | Manual hex math | Full design app |
|---|---|---|---|
| Instant palette + CSS output | ✓ | ✗ | ✓ |
| No install required | ✓ | ✓ | ✗ |
| Adjustable step count | ✓ | ✗ | ✓ |
Useful for building a coordinated color palette from two brand colors without opening a design tool.