Gradient generator
Add color stops, drag the angle, and switch between linear and radial. The preview fills the whole panel so you can judge the blend at scale, then copy the CSS in one click.
Reading a CSS gradient
A gradient is a function you pass to a background. For linear-gradient() the first argument is a direction, given as an angle, followed by a list of color stops. Each stop is a color and an optional position. Colors blend smoothly between the positions you set.
Radial gradients swap the angle for a shape and a center. Instead of traveling along a line, the colors ripple outward in rings, which is perfect for soft spotlights behind a hero or a subtle vignette.
Designing a gradient that does not look muddy
The most common mistake is blending two colors that sit far apart on the color wheel, which produces a dull grey band in the middle. To keep a gradient clean, either pick colors that are close in hue, or add a third stop in between that bridges them. HueKit makes this easy: add a stop, position it near the midpoint, and pick a bridging color.
- Two neighbors on the wheel give you a calm, premium blend.
- Opposite colors need a bridge stop to avoid a grey middle.
- Keeping saturation consistent across stops reads as intentional.
Where gradients earn their keep
Gradients add depth without imagery, which keeps pages light and fast. Reach for them on hero backgrounds, call to action buttons, and card accents. Pair a gradient background with a matching box shadow and a legible text color, checked in the contrast checker, for a polished result.
Frequently asked questions
How do CSS gradient angles work?
In a linear gradient the angle sets the direction the colors travel. 0deg points straight up, 90deg points right, and 180deg points down. HueKit shows the angle live so you can dial it in by eye.
What is the difference between linear and radial?
A linear gradient blends colors along a straight line. A radial gradient blends outward from a center point in rings. Linear suits backgrounds and buttons; radial suits spotlights and soft glows.
Can I use more than two colors?
Yes. Add as many stops as you like and position each one along the track. Multi stop gradients are how you build vivid, spectrum style backgrounds.
Is the generated CSS production ready?
Yes. The output is a standard background value that works in every modern browser with no prefixes needed.