About this tool
CSS gradients blend smoothly between colors with no image at all — lightweight, and crisp at any screen size. This generator lets you drag color stops, adjust the angle and pick colors visually with a live preview, then copy the `background` code in one click — no more hand-writing `linear-gradient()` params and refreshing to check the result.
It supports linear gradients (linear-gradient, transitioning along an angle or direction) and radial gradients (radial-gradient, radiating from a center outward). You can add any number of color stops and control the exact percentage position of each color. Everything runs in the browser and the output is standard CSS you can paste straight into any project.
How to use
- Choose the gradient type: linear (linear-gradient) or radial (radial-gradient).
- Add and set color stops — click a swatch to pick a color, drag the slider to set each color’s position percentage.
- For linear, adjust the angle (e.g. `90deg` for left-to-right); for radial, adjust the radiating direction.
- Confirm the look in the live preview.
- Copy the generated `background: linear-gradient(...)` and paste it into your stylesheet.
When to use it
- Create polished gradient backgrounds for buttons, cards and hero sections.
- Blend between brand colors to unify a page’s visual style.
- Design lightweight, image-free backgrounds that scale crisply (saving bandwidth over images).
- Experiment with several color schemes and compare gradients live.
- Produce standard CSS that hands straight to developers, cutting design-to-implementation back-and-forth.
FAQ
How does the linear-gradient angle work?
The angle is the direction the gradient travels: `0deg` is bottom-to-top, `90deg` is left-to-right, `180deg` is top-to-bottom, and so on clockwise. You can also use keyword directions like `to right` or `to bottom right`. Drag the angle in the generator to see the direction update live.
Can I use more than two colors?
Yes. CSS gradients support any number of color stops — add three, five or more colors, each with its own position percentage to control the width of every transition band.
What is the difference between radial and linear gradients?
A linear gradient transitions along a straight line (good for backgrounds and buttons). A radial gradient radiates outward from a center point in a circle or ellipse (good for glows, spotlights and sphere highlights). The syntax is similar; just switch the type in the generator.