CSS Gradient Generator
Build and copy CSS gradients — linear or radial — with live preview.
The CSS Gradient Generator produces ready-to-paste gradient CSS. Pick two colors, set the angle (or switch to radial), watch the live preview, and copy the exact background line for your stylesheet.
Gradients are the fastest way to give buttons, cards, headers and hero sections depth without images — and with CSS variables or inline styles they adapt to themes instantly. The generator keeps the syntax clean and standard so it works in any modern browser.
All computation and previewing happens locally; the copied code is plain CSS you own. For more elaborate multi-stop gradients, extend the output by hand — the pattern is the same.
CSS
background: linear-gradient(135deg, #6366f1, #ec4899);
How to use the CSS Gradient Generator
- Pick color 1 and color 2.
- Drag the angle slider for linear gradients.
- Toggle Radial for a center-out gradient.
- Watch the live preview update.
- Copy the CSS and paste it into your stylesheet.
Frequently asked questions
What does the angle mean in linear-gradient?
The angle sets the direction of the color transition in degrees: 0deg goes bottom to top, 90deg left to right, 180deg top to bottom (the classic default), 135deg bottom-left to top-right — a popular diagonal.
Can I use gradients in inline styles?
Yes — the generated CSS works in style attributes, CSS classes and style tags. For responsive theming, place them in your stylesheet and switch colors with variables.
Why does my gradient look banded?
On large areas, smooth gradients can show subtle color steps. Adding a third mid-stop color or a tiny noise texture usually hides the banding.
Related tools
View all fun & generators →Fancy Text Generator
Convert plain text into bold, script, fraktur, circled and fullwidth Unicode styles.
FunReverse Text Generator
Reverse characters, reverse each word, or flip your text upside down.
FunMorse Code Translator
Convert text to Morse code and back — letters by space, words by slash.
FunNATO Phonetic Alphabet Converter
Spell any text with Alfa, Bravo, Charlie — perfect for voice and radio.
FunASCII Art Text Generator
Turn words into big block ASCII letters for code comments and signatures.
FunEmoji Copy Paste
Search and copy hundreds of emoji — organized by category.