UtilHero

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, set the angle for a linear gradient or switch to radial, 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. Toggle between the two and the CSS updates.
How do I set the gradient angle?
In linear mode, drag the angle slider (0–360°). 90° runs left to right, 180° top to bottom — the preview and the linear-gradient() code update as you go.
Can I use more than two colors?
Yes. Add color stops (up to six), edit each hex value, randomize, or remove them to control the blend.
Does it give me copy-paste CSS?
Yes. It outputs a standard CSS background rule you can paste straight into your stylesheet — no sign-up and nothing is uploaded.

More tools

All Design & Color
Unit ConverterAWG to mm²NetToolkitClick CounterClick TestTyping Speed TestReaction Time TestKeyboard TesterDead Pixel TestMic TestWebcam TestPassword GeneratorPassword Strength CheckerID GeneratorStopwatchTimerCountdown to DateTodo ListOnline NotepadWheel SpinnerRandom Number GeneratorCoin FlipDice RollerWord CounterJSON FormatterJSON VisualizerCSV to JSONYAML to JSONSQL FormatterCron Expression GeneratorChmod CalculatorQR Code GeneratorBarcode GeneratorPercentage CalculatorGPA CalculatorGrade CalculatorScientific CalculatorAge CalculatorRoman Numeral ConverterBase64 Encode / DecodeNumber Base ConverterText to BinaryMorse Code TranslatorSymbols & EmojiCase ConverterText to SpeechText RepeaterFancy Text GeneratorHash GeneratorURL Encode / DecodeUnix Timestamp ConverterTime Zone ConverterColor PickerColor ConverterLorem Ipsum GeneratorBMI CalculatorBMR & Calorie CalculatorTip CalculatorJWT DecoderJWT EncoderRegex TesterUTM BuilderSERP SimulatorOpen Graph GeneratorDynamic QR Code GeneratorSlugifyText DiffRemove Duplicate LinesDiscount CalculatorSales Tax CalculatorLoan CalculatorCompound Interest CalculatorMortgage CalculatorTime Duration CalculatorContrast CheckerBox Shadow GeneratorBorder Radius GeneratorFlexbox & Grid GeneratorPalette GeneratorTints & ShadesImage to Base64Aspect Ratio CalculatorImage ResizerHEIC to JPGAVIF to JPGAVIF to PNGFavicon GeneratorInvoice GeneratorPDF ToolsRotate PDFDelete PDF PagesReorder PDF PagesAdd Page NumbersWatermark PDFPDF to JPGPDF to Text