CSS Gradient Generator
Design a gradient background visually and copy the CSS. Choose linear or radial, set the angle, add colour stops and drag their positions.
Free · No sign-up · Files stay on your device
How to use CSS Gradient Generator
- 1Choose linear or radial.
- 2Pick colours and adjust their positions.
- 3Set the angle.
- 4Copy the CSS.
Features
- Linear and radial gradients
- Up to 5 colour stops
- Angle control
- Live preview
- One-click CSS copy
Using the CSS
Paste the line into any CSS rule, for example on a section, button or the page body. Modern browsers support gradients without vendor prefixes, so one line is all you need.
Frequently asked questions
Do I need -webkit- prefixes?
No. All current browsers support the standard linear-gradient() and radial-gradient() syntax.
Can I use transparent colours?
Yes. Lower a stop's opacity to fade to transparent.
How do I make text a gradient?
Use the gradient as a background with background-clip: text and color: transparent.
Related tools
Box Shadow GeneratorCreate CSS box shadows visually: offset, blur, spread, colour, opacity and inset. Live preview and copy-ready CSS. Includes soft, card and glow presets.Color Palette GeneratorGenerate colour palettes from any base colour: complementary, analogous, triadic, split-complementary, tetradic, shades and tints. Copy HEX or CSS variables.CSS MinifierMinify CSS online for free. Remove comments and whitespace to shrink stylesheets and speed up your website. Shows bytes saved. Runs in your browser.