Design beautiful CSS gradients and copy the exact code
A gradient is a smooth blend between two or more colours, and it is one of the quickest ways to give a flat page some depth and personality. The hard part has always been writing the syntax by hand — remembering the angle order, the percentage positions and the function name, then reloading the page over and over to see what changed. This CSS gradient generator removes all of that guesswork. You build the gradient visually in the live preview at the top of the page, and the tool writes valid, ready-to-paste CSS for you underneath as you work.
It is built for front-end developers, designers, students and hobbyists who want a good-looking background without trial and error. There is nothing to install and nothing to learn first: every control updates the preview the moment you touch it, so you always see the real result instead of imagining it. When the blend looks right, one click copies the full background declaration to your clipboard. Everything happens inside your browser — no account, no upload, no limits.
How to use the gradient generator
- Choose a gradient type — Linear, Radial or Conic — using the buttons under the preview.
- Drag the angle slider (for linear and conic gradients) to set the direction the colours travel.
- Edit each colour stop: tap the colour swatch to recolour it and drag the position slider from 0% to 100% to control where that colour sits.
- Use Add colour to insert more stops (up to eight), the ✕ to remove one, or Random to roll a fresh palette.
- Pick a ready-made preset to start from, then tweak it to taste.
- Click Copy CSS and paste the code into your stylesheet.
Linear, radial and conic — when to use each
A linear gradient blends colours along a straight line, and the angle sets that line's direction: 0° runs bottom to top, 90° runs left to right, and 135° gives the popular diagonal look. It is the default choice for page backgrounds, hero banners, buttons and cards. A radial gradient (this tool outputs radial-gradient(circle, …)) spreads outward from a centre point, which is ideal for soft spotlight glows, badges and round buttons; because it has no direction, the angle control is hidden when you select it. A conic gradient sweeps the colours around a centre point like the hand of a clock, and its start angle decides where the sweep begins — perfect for pie-chart segments, colour wheels and loading spinners.
Colour stops, positions and smooth blends
Each colour stop is a colour plus a position written as a percentage, for example #8b5cf6 0%. The browser fills the space between two stops with a smooth transition, so the gap between positions controls how gentle or abrupt the blend is. Place two stops far apart for a soft fade; move them close together for a sharp line, which is how you create stripes or hard colour bands. Adding a stop in the middle gives a three-colour blend, and you can keep going up to eight stops for rich, multi-tone effects. The tool always sorts your stops by position before writing the code, so the output stays valid even if you drag them out of order.
Tips, common mistakes and accessibility
Keep most backgrounds to two or three stops — too many colours quickly look muddy rather than vibrant. If you are placing text over a gradient, check that the words stay readable against the lightest and the darkest part of the blend, not just the middle, and add a subtle dark overlay if contrast is tight. A frequent mistake is reaching for a radial gradient and then expecting the angle to do something; remember that radial gradients have no direction. Another is forgetting that linear-gradient is an image value, so it belongs on background or background-image, not on the plain background-color property. For wide browser support you can drop the generated value straight in — linear, radial and conic gradients are supported across all current major browsers.
Private and free, right in your browser
Nothing you create here is sent anywhere. The preview, the colour maths and the generated code all run locally on your device using standard browser features, so your palettes never leave your computer and the tool keeps working even if your connection drops. There is no sign-up, no watermark and no cap on how many gradients you can make — experiment as much as you like, copy what you need, and move on.