CSS Gradient Generator
Build linear and radial gradients and copy the CSS — in your browser.
background: linear-gradient(90deg, #3b82f6, #8b5cf6);About Gradient Generator
A CSS gradient generator lets you design linear and radial gradients visually and copy the code. Add color stops, adjust the angle or shape, preview it live, and copy ready-to-use CSS for your site. No sign-up, runs in your browser.
Frequently asked questions
- What's the difference between linear and radial gradients?
- A linear gradient blends colors along a straight line at an angle; a radial gradient blends outward from a center point in a circle or ellipse.
- Can I use more than two colors?
- Yes. Add as many color stops as you like and position each one to control the blend.
- Does it give me copy-paste CSS?
- Yes. It outputs standard CSS background you can paste straight into your stylesheet.
More tools
Unit ConverterNetToolkitClick CounterClick TestPassword GeneratorID GeneratorStopwatchTimerTodo ListWord CounterJSON FormatterJSON VisualizerQR Code GeneratorPercentage CalculatorAge CalculatorBase64 Encode / DecodeCase ConverterHash GeneratorURL Encode / DecodeUnix Timestamp ConverterColor ConverterLorem Ipsum GeneratorBMI CalculatorTip CalculatorJWT DecoderJWT EncoderRegex TesterSlugifyText DiffRemove Duplicate LinesDiscount CalculatorLoan CalculatorTime Duration CalculatorContrast CheckerPalette GeneratorTints & ShadesImage to Base64Image ResizerFavicon GeneratorMerge & Split PDF